CSS3 背景
Posted 自学web网页前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 背景相关的知识，希望对你有一定的参考价值。
CSS3新增背景属性：
background-size
background-origin
background-clip
CSS3 background-size 属性
background-size 属性规定背景图片的尺寸。
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(bg_flower.gif);
/* -moz-background-size:40% 100%; 老版本的 Firefox
background-size:40% 100%;*/
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img alt="Flowers"></p>
</body>
</html>
CSS3 background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
background-clip 属性
规定背景的绘制区域
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
/*background-clip:padding-box试一试与ontent-box的区别*/
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>
<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>
以上是关于CSS3 背景的主要内容，如果未能解决你的问题，请参考以下文章