背景色基本属性以及简写

1
2
3
/* <attachment>? <bg-image> <position> / <bg-size> <repeat-style> <background-color>*/
/* 背景色只能出现在最后一层 */
background: local url("xxx.jpg") no-repeat {bottom|top xx left|right xx}/{width,height} #FFFFFF;

url 是否循环 位置 尺寸

  1. 如果位置和尺寸只写一组那么就是位置,尺寸走缺省值;俩都写中间用/分隔
  2. 位置:垂直 水平
  3. 尺寸:垂直 水平
1
background: url("xxx.jpg") no-repeat center left/contain #333;

这样能实现背景图和背景色一起使用，
多张背景图和背景色一起使用时背景色要写在最后一个背景图处

完整写法

1
2
3
4
5
background-image: url("../../assets/img/adidasActivity/long-bg-1.png");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;

ios下background-attachment: fixed不生效需要做兼容写法处理

1
2
3
4
5
6
7
8
9
10
11
&::before{
    content: '';
    z-index: -1;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: url("../../assets/img/adidasActivity/long-bg-1.png") no-repeat center 0;
    background-size: cover;
}

渐变色背景

1
2
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                url("../../media/examples/lizard.png");