css background属性

css的background属性

1. 第一种写法 [background-image background-position / background-size]

background: url("xxx.png") center / 100%;

2. 第二种写法

background: url("xxx.png") no-repeat;
background-size: 100px 100px;

3. 在scss中定义混入和使用混入来快速引入背景图片

@mixin initBox($url, $width, $height) {
    width: $width;
    height: $height;
    background: $url center / $width $height;
}

@mixin initBox($url, $width, $height) {
    width: $width;
    height: $height;
    background: $url no-repeat;
    background-size: $width $height; 
}

@include initBox(url('xxx.png'), 100px, 100px);