CSS3 背景
CSS3中包含几个新的背景属性,提供更大背景元素控制。
在本章您将了解以下背景属性:
- background-image
- background-size
- background-origin
- background-clip
CSS3 background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
<style>
#example1 {
background-image: url(paper.gif),url(img_flwr.gif); //前面的图片会优先显示(即会覆盖后面的图片)
background-position: right bottom, left top; //两张图片的位置
background-repeat: no-repeat, repeat; //是否平铺
padding: 15px;
}
</style>
也可以这样写:
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
CSS3 background-size 属性
background-size指定背景图像的大小。
background-size:80px 60px; 或者 background-size:100% 100%;
CSS3 的 background-origin 属性
background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
background-origin:content-box;
CSS3 background-clip属性
和上面的origin意思一样,但这个对应的是背景颜色,origin对应的是背景图像。