CSS3_背景

最新推荐文章于 2024-09-13 23:28:46 发布

时间解

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量317

点赞数

分类专栏： CSS 文章标签： css3 backgroud size origin clip

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>