CSS 背景

下文笔者讲述CSS背景的功能,如下所示

CSS背景的功能

CSS 背景属性:
     用于设置html元素的背景效果

CSS 背景属性有:
    background-color:设置背景色
	background-image:设置背景图片
	background-repeat:设置背景图片是否重复
	background-attachment:设置背景附件
	background-position:设置背景位置

background-color

background-color属性:
     用于设置元素的背景色

例:

  设置整个网页背景颜色
body {background-color:green;}

背景图像

background-image属性:
   将图像设置为HTML元素的背景。

例

body {background-image: url("test.jpg");}

背景重复

通常情况下
   background-image属性 在水平和垂直方向上都重复图像
此时我们可以使用background-repeat属性,对html元素的背景中平铺背景图像
   页可设置垂直(y轴),水平(x轴),双向或双向重复的背景图像

例

延x轴重复
body {
    background-image: url("test.png");
    background-repeat: repeat-x;
    }

背景附件

background-attachment属性:
    确定背景图像相对于视口是固定的还是随包含块一起滚动。

例

body {
    width: 250px;
    height: 200px;
    overflow: scroll;
    background-image: url("recycle.jpg");
    background-attachment: fixed;
    }

背景位置

background-position属性:
    用于控制背景图像的位置
这个属性在日常开发中经常使用
  如：将网页的所有图标制成一个图片
      使用时，通过背景定位显示不同的图标

注意事项:
    默认情况下,背景图片的起始位置(0,0)

例

 
例
   图像的位置由background-position属性指定
body {
    background-image: url("test.jpg");
    background-repeat: no-repeat;
    background-position: 100% top;
    }

background属性简写

例

body {
    background-color: red;
    background-image: url("test.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
    }

可简写为
body {background: red url("test.png") no-repeat fixed 250px 25px;}

background后面跟属性值的顺序为:
   颜色 图像 重复 附件 位置;

background注意事项:
  1.使用background简写时，如果某些属性未写时，则使用该属性的默认值
  2.background属性不会被继承