南昌UI培训
达内南昌中心

0571-56020837

热门课程

非常实用的CSS blackground属性解读

  • 时间:2016-06-06
  • 发布:南昌UI培训
  • 来源:优设网


  background 属性是CSS中用于设置元素背景的属性,无论是网页设计师还是前端开发人员都需要设置这一属性,最早的background只能用单一背景图或纯色,而现在可以用多种背景图以及渐变色了。

  南昌达内UI设计培训专家将background属性划分为8个类型,如下所示:

一、背景颜色之 background-color

  background-color是最早,最古老,最常用的属性之一,取值是唯一的,颜色值。

二、背景图片之 background-image

  background-image顾名思义是设置背景“图片”的,这里的图片并非我们通常意义上理解的“图片”,而是由CSS Image Values and Replaced Content Module所规定的一系列内容,用以替代CSS2中所规定的background-image属性与list-style-image属性中的url参数,或者作为伪元素content的值。现在浏览器也没有完全实现这些,可用的包括url()引用图片,和渐变“图片”,然后以逗号分隔所有图片。

CSS 渐变

  CSS渐变分成两种,linear-gradient()的线性渐变和radial-gradient()的径向渐变。两个渐变在早期不同浏览器上的实现语法大相径庭,所以用的人较少,还是倾向于使用图片,现在各个浏览器的显示和实现已经基本趋向于一致,而且在手机端也有比较好的实现,在移动端开发完全可以广泛使用了。

三、背景重复之 background-repeat

  background-repead用于设置背景的重复方式,可选值有下面几种:

  1.no-repeat 不重复,等价于no-repeat no-repeat

  2.repeat-X X轴方向(横向)重复,等价于repeat no-repeat

  3.repeat-Y Y轴方向(纵向)重复,等价于no-repeat repeat

  4.repeat 重复平铺,等价于repeat repeat

  5.round 图像在指定方向平铺,会根据显示空间的大小缩放图像(什么时候缩放,什么时候增减平铺的数量是由浏览器决定的)

  6.space 图像会尽可能重复,但不裁剪,第一张和最后一张固定在元素两端,剩下的均匀分布。此时background-position属性被忽视。另外只有在图像大过元素的时候会发生裁剪。

四、背景固定之 background-attachment

  background-attachment用于设置背景相对的固定方式,可选值有:

  1.scroll 默认值,背景相对于元素固定。

  2.fixed 背景相对于整个窗口固定。随着最近全屏大图网站的流行,这种背景固定模式也日渐多见起来。

  3.local 背景相对于元素内容固定,如果元素内有滚动条,背景会随着内容滚动。

五、背景定位之 background-position

  background-positon,顾名思义就是用来定位的,但是这个定位的语法很复杂。可用的各种指示方向的关键字,也可以用数字单位或者百分比,写法有下面几种:

  1.并列写两个关键字(或值),第一个值代表它的水平位置,第二个值代表它的垂直位置(这个和padding、margin、border这些先上下再左右的属性刚好是反的…)。另外如果两个都是关键字,那么位置可以交换,也就是说,center left是合法的,然而50% left不行。

  2.只写一个关键字(或值),那么它的第二个值就默认为center(居中)。

  3.三、四值,可以从元素的四周定位,比如离右边10px,底边5px,就可以写成right 10px bottom 5px,两组关键字-值对可以交换位置,也可以用center替代关键字-值。这种写法目前只有FF支持。

六、背景裁切之 background-clip

  background-clip是设定背景所覆盖的范围的属性。可选值有:

  1.border-box 默认值,背景延伸到边框下,但是只有当边框的颜色是半透明的时候才能看到延伸过来的背景。

  2.padding-box 边框下没有背景。

  3.content-box 只有内容下有背景(padding的空间里都没有)

七、背景原点之 background-origin

  background-origin指定了背景图片定位的原点。属性取值与background-clip相同,但是clip是会对背景图片进行裁切,而origin是用于定位的。

八、背景尺寸之 background-size

  background-size用来设置背景尺寸,可选值有:

  1.一对值\百分比或auto,百分比是相对于background-origin所设置的尺寸而言的,auto就是图片原本的尺寸,两个数值先宽后高。

  2.cover 缩放图片,令其完全覆盖背景区域,可能导致图片某些区域不可见。

  3.contain 缩放图片,令其以最大尺寸完整展现在背景区域中,可能导致背景某些区域变成空白。

变形金刚之 background

  background是上面8个属性的总和,可以把所有属性写在一起。顺序不限,以空格隔开即可,但有几个需要注意的点:

  1.如果需要设定背景尺寸,写法是<position>/<size>,必须设定 的同时,以 / 分隔 和 。

  2.background-clip和background-origin的属性,如果只写了一个值,那么会同时应用在两个属性上,如果写了两个值,那么前者是background-origin,而后者是background-clip

  3.没有设置的会被设为默认值,之后也可以单独设置,这个和padding之类简写的方式相似。

合体战士之多重背景

  从CSS3时代开始,CSS背景开始支持多个背景图,设置在一起了。
只要将每张背景图以逗号分开,那么浏览器就会依次加载,并把写在后面的叠在上面。

  对于分开设置的背景属性,也可以以逗号分隔,分别设置。但是如果,你只想设置其中某一张图片的特定属性,那你就得把其他的也都写上才行。

  以及,背景颜色是唯一的,在使用background简写的时候,背景颜色要设置在最后一个逗号之后。






原文出处:http://www.uisdc.com/css-background-property-guideline
上一篇:从空间、变化、形式搞定电商网站设计
下一篇:打造专业网页风格指南的步骤

795万高校毕业生创历史新高,2017届毕业生就业近况几何?

达内Linux学员毕业2周就业率96%,最高薪资10000元

达内教育总裁韩少云受邀出席GIE国际教育峰会做主题演讲

达内教育集团总裁韩少云:回归本质, 打铁还需自身硬

选择城市和中心
贵州省

广西省

海南省