CSS3 背景

2018-01-16 18:47 更新

CSS3有以下三个背景属性,我们可以使用样式的元素背景。

  • background-clip
  • background-size
  • background-origin

background-clip 指定背景图像的绘制区域

background-size 属性设置背景图像的大小。

background-origin 属性指定背景图像的定位区域。

background-clip

background-clip 属性指定背景的绘制区域。


<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 200px;
    height: 200px;
    padding: 50px;
    background-color: yellow;
    background-clip: content-box;
    border: 2px solid #92b901;
}
</style>
</head>
<body>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. 
</div>

</body>
</html>

上面的代码呈现如下:


background-clip


background-clip的值可以是下列值之一:

  • border-box
  • padding-box
  • content-box
  • initial
  • inherit

background-origin

background-origin 属性指定背景图像的定位区域。

背景图像可以放置在 content-box 中, padding-box border-box 区域。

   +-----------------------------+
   |border-box                   |
   |   +--------------------+    |
   |   |padding-box         |    |
   |   |  +--------------+  |    |
   |   |  |Content-box   |  |    |
   |   |  |              |  |    |
   |   |  +--------------+  |    |
   |   |                    |    |
   |   +--------------------+    |
   |                             |
   +-----------------------------+

以下代码显示了如何使用 background-origin 为不同的值。


<!DOCTYPE html>
<html>
<head>
<style> 
div {
    border: 1px solid black;
    padding: 35px;
    background-image: url("http://placehold.it/100x100");
    background-repeat: no-repeat;
    background-position: left;
}

#div1 {
    background-origin: border-box;
}

#div2 {
    background-origin: content-box;
}
</style>
</head>
<body>

<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat.
</div>

<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

上面的代码呈现如下:

background-origin

background

background-size

background-size 属性设置背景图像的大小。

下面的代码显示了如何调整背景图像的大小。


<!DOCTYPE html>
<html>
<head>
<style> 
body {
    background: url(http://placehold.it/100x100);
    background-size: 80px 60px;
    background-repeat: no-repeat;
    padding-top: 40px;
}
</style>
</head>
<body>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. 
</p>
<p>Original image: <img src="http://placehold.it/100x100" width="224" height="162"></p>

</body>
</html>

例子

下面的示例演示如何拉伸背景图像以完全填充内容区域。


<!DOCTYPE html>
<html>
<head>
<style> 
body {
    background: url(http://placehold.it/100x100);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 40px;
}
</style>
</head>
<body>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. 
</p>
<p>Original image: <img src="http://placehold.it/100x100" width="224" height="162"></p>

</body>
</html>

上面的代码呈现如下:


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号