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>
上面的代码呈现如下：
float 属性创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 float 的可能值为：left或right或...
响应式 Web 设计 - 视频(Video)使用 width 属性 如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例： 实例vide...
此 HTML 快速参考备忘单以易于阅读的格式列出了常见的 HTML 标记及其属性。 开始hello.html!DOCTYPE htmlhtml lang="en"headmeta...
CSS 伪类 (Pseudo-classes)CSS 伪类是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，...
