通过linear-gradient实现背景图片的虚化

有时我们需要用精美的照片作为内容的背景，但是又担心背景“喧宾夺主”干扰了用户的注意力。这时候，就可以尝试在图片上面蒙上一层半透明的图层。

我们在background-image设置两张图片，排在前面的是用于虚化的linear-gradient模板，将显示在上层；排在后面的背景图片将显示在下层，为了不把背景图片完全遮住，这里需要将模板设置为半透明。

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}