背景background的相关属性:
- background-color: antiquewhite; // 设置背景颜色 antiquwhite就是透明色。
- background-image: url(); // 设置背景的图片
- background-repeat: no-repeat; // 设置背景的图片是否重复,向哪个位置重复平铺
- background-attachment: fixed; // 设置背景是否跟着屏幕的滚动而滚动
- background-position: x y; // 设置背景图片的位置
background-color的相关属性:
- 颜色设置有三种
第一种是:#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;
前端自学兔兔 一起加油呀 关注一下一起努力