CSS3(3)背景

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对应的是背景图像。

猜你喜欢

转载自www.cnblogs.com/1016391912pm/p/12669275.html