CSS3背景
背景图片大小 background-size
- 创建一个页面,背景图片宽度占%35,高度占100%:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background:url(http://www.w3school.com.cn/i/bg_flower.gif);
background-size:35% 100%; /* 定义背景图片大小 */
-moz-background-size:35% 100%; /* 老版本的 Firefox */
background-repeat:no-repeat; /* 图片只显示一次 */
}
</style>
</head>
<body>
<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</div>
</body>
</html>
背景图片的定位区域 background-origin
设置背景图片放置于 content-box、padding-box 或 border-box 区域。
- 在2个区域放置2张图片,一个区域占满border,另一个区域则只占用元素内容部分:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:60px;
background-image:url('http://www.w3school.com.cn/i/bg_flower.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box; /* 图片放置在border-box */
}
#div2
{
background-origin:content-box; /* 图片放置在content-box */
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>
更多关于border-origin
详细信息可参考: background-origin
背景的绘制区域 background-clip
设置背景绘制在 content-box、padding-box 或 border-box 区域。
- 只在一个区域的内容部分设置背景色:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box; /* 只在内容区域设置背景色 */
border:2px solid #92b901;
}
</style>
</head>
<body>
<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>
更多请参考:W3School