HTML + CSS 连载 | 24 - CSS 设置背景一、设置背景-background-image 在开发中，为了
一、设置背景-background-image
在开发中，为了让网页更加美观，我们经常会设置各种各样的背景，比如
background-image 属性用于设置元素的背景图片，这个背景图片会盖在 background-color 上面。
新建一个 HTML 页面，设置 background-image，具体代码如下：
<!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>
.box {
width: 1000px;
height: 1000px;
background-color: #f00;
/*设置背景图片*/
background-image: url(../images/2970184.png);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在浏览器中打开该 HTML 页面，效果如下：
可以看到 background-image 背景图片是盖在 background-color 背景颜色上面的，background-image 也支持设置多张图片，多张图片之间使用逗号隔开，并且显示的顺序为设置的顺序，第一个设置的图片会在最上面，其他一次叠加在下面。
<!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>
.box {
width: 1000px;
height: 1000px;
background-color: #f00;
/*设置背景图片*/
background-image: url(../images/2970184.png);
/*设置不重复图片*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
需要注意的是如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的。
.box {
/*width: 1000px;
height: 1000px;*/
background-color: #f00;
/*设置背景图片*/
background-image: url(../images/2970184.png);
/*设置不重复图片*/
background-repeat: no-repeat;
}
注释掉 CSS 设置的宽高之后，图片不再显示出来。
二、设置背景-background-repeat
前面的代码中如果设置了元素的宽高是大于图片的情况下，图片会出现重复或者平铺的情况，这种情况可以使用 background-repeat 属性来控制。
background-repeat 属性用于设置背景图片是否要平铺，常见的设置的值有：
repeat：平铺，在水平和垂直方向上平铺no-repeat：不平铺repeat-x：只在水平方向上平铺repeat-y：只在处置方向上平铺
background-repeat 属性的默认值是 repeat，会在水平和垂直方向上平铺，新建 HTML 页面，代码如下：
<!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>
.box {
width: 800px;
height: 800px;
background-image: url(../images/1228984.png);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在浏览器中打开页面，效果如下：
我们可以设置在水平方向上平铺，修改 CSS 代码为如下形式：
.box {
width: 800px;
height: 800px;
background-image: url(../images/1228984.png);
background-repeat: repeat-x;
}
也可以设置只在垂直方向上平铺，修改 CSS 代码为如下形式：
.box {
width: 800px;
height: 800px;
background-image: url(../images/1228984.png);
background-repeat: repeat-y;
}
当然我们也可以设置不平铺，使用 no-repeat 属性值即可，修改 CSS 代码为如下形式：
.box {
width: 800px;
height: 800px;
background-image: url(../images/1228984.png);
background-repeat: no-repeat;
}
利用平铺的特性，我们可以实现这样一个由多个相同图片构成的背景。
<!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>
.box {
width: 600px;
height: 600px;
background-color: #f00;
/*设置背景图片，默认是会在水平和垂直方向上平铺，无须任何设置*/
background-image: url(../images/wall.png);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在浏览器中打开该 HTML 页面，效果如下：
三、设置背景-background-size
background-size 可以设置背景图片的大小，包含以下几个值：
auto：默认值，以背景图片本身大小显示cover：缩放背景图，以完全覆盖铺满元素，可能背景图片部分看不见contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比<percentage>：百分比，相对于背景区<length>：具体的长度，比如 100px
<!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>
.box {
width: 600px;
height: 600px;
background-color: #f00;
/*设置背景图片及平铺方式*/
background-image: url(../images/1228984.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
设置背景尺寸之前的效果如下：
通过 background-size 设置背景属性：
.box {
width: 600px;
height: 600px;
background-color: #f00;
/*设置背景图片及平铺方式*/
background-image: url(../images/1228984.png);
background-repeat: no-repeat;
/*设置图片尺寸*/
background-size: contain;
}
设置为 contain，会把某一边拉伸，具体效果如下：
修改 background-size 属性：
.box {
width: 600px;
height: 600px;
background-color: #f00;
/*设置背景图片及平铺方式*/
background-image: url(../images/1228984.png);
background-repeat: no-repeat;
/*设置图片尺寸*/
background-size: cover;
}
设置为 conver，图片会保持原来的宽高比，超出的部分会被隐藏，具体效果如下：
除了固定值之外，也可以设置百分比：
.box {
width: 600px;
height: 600px;
background-color: #f00;
/*设置背景图片及平铺方式*/
background-image: url(../images/1228984.png);
background-repeat: no-repeat;
/*设置图片尺寸*/
background-size: 100% 100%;
}
在浏览器中打开 HTML 页面，具体效果如下：
当然也可以设置具体的值：
.box {
width: 600px;
height: 600px;
background-color: #f00;
/*设置背景图片及平铺方式*/
background-image: url(../images/1228984.png);
background-repeat: no-repeat;
/*设置图片尺寸*/
background-size: 100px 100px;
}
在浏览器中打开 HTML 页面，具体效果如下：
转载自:https://juejin.cn/post/7294908459002314787