背景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;

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

BufferedImage destImage 设置背景透明 background设置透明_前端

设置背景的透明度:

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;

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

BufferedImage destImage 设置背景透明 background设置透明_css3_02