1.背景图如何才能完美适配视口 让背景图适配视口很容易，需要使用下面 CSS 即可：
body {
background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
2.如何在CSS中使用多个背景图片？
如果我想在背景中添加一张以上的图片怎么办？CSS3 中可以直接 指定多个背景路径，如下所示：
body {
background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
background-position: center, top;
background-repeat: repeat, no-repeat;
background-size: contain, cover;
}
3.如何创建一个三角形的背景图像
另一个很酷的背景特效就是三角形背景，当我们想展示某些完全不同的选择（例如白天和黑夜或冬天和夏天）时，这种特效就更加棒。
思路是这样的，首先创建两个div，然后将两个背景都添加到其中，然后，第二个div使用clip-path属性画出三角形。
html
<body>
<div class="day"></div>
<div class="night"></div>
</body>
css
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
height: 100vh;
width: 100vw;
}
.day {
background-image: url("images.unsplash.com/photo-14779…");
background-size: cover;
background-repeat: no-repeat;
}
.night {
background-image: url("images.unsplash.com/photo-14935…");
background-size: cover;
background-repeat: no-repeat;
clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}
4.如何在背景图像上添加叠加渐变？
有时我们想在背景上添加一些文字，但有的图片太亮，导致字看不清楚，所以这里我们就需要让背景图叠加一些暗乐来突出文字效果。
例如，可以通过添加粉红橙色渐变或红色至透明渐变来增强日落图像，这些情况下使用叠加的渐变就很容易做到。
body {
background-image:
linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center
}原文地址：https://juejin.im/post/5ec32182e51d454dea6feeb8
本文暂时没有评论，来添加一个吧(●'◡'●)