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表示背景图片不做任何铺放格式设置。

四、设置背景图像是否固定或者随着页面的其余部分滚动:background-attachment

  background-attachment: scroll || fixed

background-attachment主要是用来设置背景图像是否固定或者随着页面的其余部分滚动,,其默认值为scroll,表示背景图片会随滚动条一起滚动,而取值fixed时,背景图片固定不动。

五、设置背景图片的位置background-position

   background-position: <percentage> || <length> || [left|center|right][,top|center|bottom]

background-position主要是用为设置背景图片的位置,其默认值为(0,0)||(0%,0%)||(left top),可以进行具体的百分数或数值设置,也可以使用left,center,top,right,top,bottom配合设置,而其中以下几种表示相同定位方式:

"top left","left top"和"0% 0%","0,0"代表元素的左上角;

"top","top center","center top"和"50% 0"表示在元素顶边居中位置;

"right top","top right"和"100% 0"代元素的是元素的右上角位置;

"left","left center","center left"和"0% 50%"表示在元素左边中间位置;

"center","center center"和"50% 50%"表示在元素中间位置;

"right","right center","center,right"和"100% 50%"表示在元素右边中间位置;

"bottom left","left bottom"和"0% 100%"表示在元素的左下角;

"bottom","bottom center","center bottom"和"50% 100%"表示在元素的底下中间点位置;

"bottom righ

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

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

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

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