9 CSS背景属性

  • 9 CSS背景属性已关闭评论
  • 68 次浏览
  • A+
所属分类:Web前端
摘要

页面的背景颜色有四种属性值表示,分别是transparent(透明),RGB十进制颜色表示,十六进制颜色表示和颜色单词表示。
属性使用:


CSS 背景属性
1. background-color(背景颜色)

页面的背景颜色有四种属性值表示,分别是transparent(透明),RGB十进制颜色表示,十六进制颜色表示和颜色单词表示。
属性使用:

/* background-color: transparent;   // 透明  background-color: rgb(255,0,0); //  红色背景  background-color: #ff0000;  //  红色背景 background-color: red;    // 红色背景  */ 
2. background-image(背景图片)

background-image可以引入一张图片作为元素的背景图像。默认情况下,background-image放置在元素的左上角,并在垂直和水平方向重复平铺。

语法:background-image: url('图片地址') 
当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到,或者不能完全铺满元素时,就会显示背景颜色。 
3. background-repeat(背景平铺方式)

CSS中,当使用图像作为背景了以后,都是默认把整个页面平铺满的,但是有时候在很多场合下面,页面并不需要这种默认的效果,而可能需要背景图像只显示一次,或者只按照指定方式进行平铺的时候,可以使用background-repeat来进行设置。
background-repeat专门用于设置背景图像的平铺方式,一般有四个值:

默认是repeat(平铺) no-repeat(不平铺) repeat-x(X轴平铺) repeat-y(Y轴平铺) 
4. background-position(背景定位)

CSS中支持元素对背景图像的定位摆放功能,就是利用background-position属性来实现,以页面中元素的左上角为原点(0,0),把元素的内部区域当成一个坐标轴(上边框为X轴,越往左X的值越大,左边框为Y轴,越往下Y轴的值就越大,反之亦然),然后计算出背景图片的左上角与圆点的距离(x轴和y轴的距离),然后把背景图片放入到指定的位置上,对背景图片的位置进行精确的控制和摆放。
background-position的值分成两个,使用空格隔开,前面一个是背景图片左上角的x轴坐标,后面一个是背景图片左上角的y轴坐标。两个值都可以是正、负值。

语法:background-position: x轴坐标 y轴坐标 背景定位的值除了是具体的数值以外,还可以是左(left)、中(center)、右(right) 
5. background(背景样式缩写)

和字体属性一样,多个不同背景样式属性也是可以同时缩写的,不过不需要像字体那样按照一定的顺序,背景样式的缩写属性的顺序是不固定的,可以任意编排。

语法:background: 背景颜色  背景图片  背景平铺方式  背景定位;