一、设置背景颜色
通过 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%;