CSS3 Background-size

Background大家一定不会陌生,但是CSS3开始,给这个Background属性增加了几个新的属性值 :Background-size,Background-clipBackground-origin。那么从今天开始分几节内容分别来介绍一下background-size,background-clip,background-origin等新属性。今天的主题是Background-size,在开始介绍Backgrond-size之前,大家一起来回忆一下CSS2Background中带有的一些属性:

   background: [<background-color>][,<background-image>][,<background-repeat>][,<background-attachment>][,<background-position>] 

background我们可以把其属性值串写在一起,同时也可以一个一个分写出来,下面简简单重温一下各属性的取值情况:

一、设置背景色:background-color

  background-color: transparent || <color>

background-color其主要用来设置元素的背景颜色,其默认值为transparent(不设置任何颜色情况下是透明色),<color>用来设置背景色彩,常用的颜色格式为:颜色名:如“red”;rgb色:如rgb(255, 0, 0)或rgb(100%, 0%, 0%);hls值hsl(0, 100%, 50%),二进制值 #FF0000。在支持CSS3的浏览器中还可以使用rgba值rgba(255,0,0,1)。

二、设置背景图片:background-image

  background-image: none || <url>

background-image其主要用来设置元素的背景图片,默认值为none,<url>是指背景图片的地址,这个地址可以是相对地址,也可以是绝对地址。

三、设置背景图片重复:禾王background-repeat

  background-repeat: repeat || repeat-x || repeat-y || no-repeat

background-repeat是用来设置background-image在元素中的铺放格式的,其默认为repeat,也就是背景图片沿元素的X轴和Y轴同时平铺,另外几个值分别表示repeat-x:背景图片仅沿X轴水平平铺,repeat-y背景图片仅沿Y轴平铺,no-repeat表示背景图片不做任何

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/content/css3-background-size

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部