background-clip 指定背景图像的绘制区域
background-size 属性设置背景图像的大小。
background-origin 属性指定背景图像的定位区域。
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-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-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>
上面的代码呈现如下：
CSS 导航栏实例: 导航栏HomeNewsArticlesForumContactAbout导航栏熟练使用导航栏，对于任何网站都非常重要。使用CSS你可以转换成...
CSS 图像透明/不透明使用 CSS 很容易创建透明的图像。注意：CSS Opacity 属性是W3C 的 CSS3 建议的一部分。 实例1 - 创建一个透...
很多 CSS 初学者在前端开发过程中，经常会用到CSS虚线样式，但是不知道CSS虚线样式该如何实现，比如一个CSS这样写：border-sty...
HTML事件属性onwheel触发 onwheel 属性事件当鼠标滚轮向上或向下滚动时。HTML5中的新功能 onwheel 属性是HTML5中的新特性。句法e...
font 标签的使用示例如下所示，该标签已经过时，因此我们不建议您使用该标签。实例规定文本的尺寸、字体和颜色：font size="3" c...
