CSS背景background相关属性使用方法：

背景background的相关属性：

1. background-color: antiquewhite; // 设置背景颜色 antiquwhite就是透明色。
2. background-image: url(); // 设置背景的图片
3. background-repeat: no-repeat; // 设置背景的图片是否重复，向哪个位置重复平铺
4. background-attachment: fixed; // 设置背景是否跟着屏幕的滚动而滚动
5. background-position: x y; // 设置背景图片的位置

background-color的相关属性：

1. 颜色设置有三种
   第一种是：#FF0000
   第二种是：rgb(红，绿，蓝，透明度)的样式，
   第三种是：是颜色，eg：red pink 直接设置的这一种；

 background-color: antiquewhite;  // 把背景颜色设置为透明色

background-image:url();的相关属性

url里面填写图片的相对路径，或者网站链接图片等，与之前img标签的使用方法一致

 background-image:url(../image/logo.jpg);   // 设置logo背景；

background-repeat:

特性：这个属性是设置这个图片的重复，有沿着x轴平铺，有沿着y轴平铺，默认是沿着x轴平铺，当然也可以设置为不重复也就是no-repeat;
语法：

	background-repeat: no-repeat;  // 让图片不再重复显示
    background-repeat: repeat-x;   //  让图片沿着X轴重复显示
    background-repeat: repeat-y;  // 让图片沿着y轴重复显示

background-attachment：

特性：这个属性是设置这个图片是否固定屏幕显示；或者随着滚动条滚动；

background-attachment: scroll; // 让背景图片随着滚动条一起滚动；
background-attachment: fixed; // 让背景图片固定在桌面，不随着滚动条滚动；

background-position:x轴方向 y轴方向;

特性：设置背景图片的位置，可以是绝对的位置（10px 20px），也可以是（left center）,默认是（center center）;

	background-position: center center; // 背景图片的默认位置，x y 轴都是居中
    background-position: top center;    // 背景图片显示在中间顶部，（x轴顶部  y轴居中）
    background-position: left;      // 如果不设置另外一个轴的样式，那就是默认center,并且x ,y轴没有顺序，先写哪个都可以。 因此这个是显示在中间左侧；
    background-position: right; //   根据上面的情况，这个显示在中间右侧。
    background-position: 0 0;  // 这个是绝对位置，非常重要，与后面的精灵图，雪碧图的设计有关。非常重要。  因为是0 0 .所以向x轴正方向移动0px 向y负方向移动0px；

背景图片是怎么延伸的呢：

设置背景的透明度：

background-color:rgb(红,绿,蓝,透明度); 透明度范围; 0~1之间;

	background-color: rgb(red, green, blue);  // 不设置背景透明度；
    background-color: rgb(red, green, blue),0.5;   // 让背景透明一半；

背景的复合属性：

// background：背景颜色 背景图片 背景图片是否重复 背景是否固定 背景位置；
 background: antiquewhite url() no-repeat fixed 0 0;

前端自学兔兔 一起加油呀 关注一下一起努力