CSS背景调整 - 技术栈

一、设置背景颜色

通过 background-color 属性指定，值可以是十六进制 #ffffff，也可以是rgb(0, 255, 255)，或是颜色名称 "red"

css 复制代码

div {
       	background-color: red;	/*	通过颜色名称设置	*/
        background-color: #ff0000;	/*	通过十六进制设置	*/
        background-color: rgb(255, 0, 0);	/*	通过rgb三原色设置	*/
}

效果如下：

二、设置背景图片

通过 background-image 属性，结合url()函数指定，图片的位置可以是本地路径，也可以是网络资源路径

css 复制代码

body {
        background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');
}

效果如下：

三、设置图片的重复平铺方式

正如刚刚只设置了背景图片，没有设置重复平铺方式，那么当网页缩小时，背景图将向水平方向、垂直方向重复平铺

如：

通过 background-repeat 属性设置重复平铺方式，这里简单介绍三种：

① no-repeat 不重复平铺

css 复制代码

body {
        background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');
    	/*	不重复平铺	*/
        background-repeat: no-repeat;
}

效果如下：

② repeat-x 只在水平方向（x轴）上重复平铺

css 复制代码

body {
        background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');
 		/*	只在水平方向上平铺	*/
        background-repeat: repeat-x;
}

效果如下：

③ repeat-y 只在垂直方向（y轴）上重复平铺

css 复制代码

body {
        background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');
        /*	只在垂直方向上平铺	*/
        background-repeat: repeat-y;
    }

四、设置背景图片的位置

通过 background-position-x 设置背景图的起始x坐标，background-position-y 设置背景图的起始y坐标

css 复制代码

body {
        background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');
        background-repeat: no-repeat;
    	/*	设置背景图片的坐标	*/
        background-position-x: 500px;
        background-position-y: 200px;
    }

注意：设置图像坐标时，一定要把图像设置为不重复平铺，即background-repeat: no-repeat; 不然图片平铺之后看不出背景图片的位置

效果如下：

五、设置背景图片的宽高

通过 background-size 设置背景图片的宽高

css 复制代码

/*	设置背景图片的宽度和高度为1024px	*/
background-size: 1024px;
/*	设置背景图片的宽为1024px  高为512px	*/
background-size: 1024px 512px; 

/*	设置背景图片的宽度和高度为原先的60%	*/
background-size: 60%;
/*	设置背景图片的宽为60%  高为40%	*/
background-size: 60% 40%;