01-CSS设置背景
01 背景颜色
一般情况下元素的背景颜色默认值是transparent(透明)
<!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>
div {
width: 100px;
height: 100px;
background-color: transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
02 background-image(背景图片)
如果设置了背景图片,元素没有宽高，背景图片不会显示出来·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
background-color: red;
height: 600px;
width: 600px;
background-image: url("./images/2.webp"), url("images/1.webp");
/* 不要平铺展开 */
background-repeat: no-repeat;
}
</style>
<body>
<div class="box">
</div>
</body>
</html>
03 background-repeat
04 background-size
05 背景位置
02-长图片用背景
<!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>
body {
margin: 0;
}
.box {
height: 489px;
background-image: url(./imgs/mhxy.jpg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</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>
body {
margin: 0;
}
.box {
height: 489px;
background-image: url(./imgs/mhxy.jpg);
background-position: center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>