**一、**背景颜色 background-color
- 属性名:background-color
- 作用:在盒子区域添加背景颜色的修饰
- 加载区域:在 border 及以内加载背景颜色
- 属性值:颜色名、颜色值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
background-color: slateblue;
}
</style>
</head>
<body>
<div class="box"> 背景颜色 </div>
</body>
</html>
二、背景图片 background-image
- 属性名:background-image
- 作用:给盒子添加图片的背景修饰
- 加载范围:默认的加载到边框及以内部分。后期如果图片不重复加载,加载从 border 以内开始
- 属性值:url(图片路径)
- url:uniform resource locator,统一资源定位符,小括号内部书写查找图片的路径
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
/* background-color: slateblue; 背景颜色 */
background-image: url(images/lagouwang.jpg);
}
- 如果图片不重复,从 border 以内开始加载
- 背景图和背景颜色可以同时设置,背景图会压盖背景颜色,没有背景图的区域会显示背 景颜色
三、背景重复 background-repeat
- 属性名:background-repeat
- 作用:设置添加的背景图是否要在盒子中重复进行加载
- 根据属性值不同,有四种重复加载方式
| 属性值 | 作用 |
| repeat | 重复,默认属性值,表示会使用背景图片重复加载填满整个盒子背景区域 |
| no-repeat | 不重复,不论背景图是否大于盒子范围,都只加载一次图片 |
| repeat--x | 水平重复,使用背景图片水平重复加载铺满第一行,垂直方向不重复 |
| repeat--y | 垂直重复,使用背景图片垂直重复加载铺满第一列,水平方向不重复 |
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;