您的位置：首页 > Web前端 > CSS

CSS3_背景

2016-04-10 15:15 513 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 backgroud size origin clip

相关文章推荐

新的分享

章节导航