Question

是否有一种方法可以将图像作为具有封面大小的背景，然后紧随图像之后放置渐变？它将产生类似衰落的现象。我尝试了类似的方法，但是它不起作用。

body { 
  height: 100vh;
  background: url('./images/bg.jpg') no-repeat, linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%); 
}

Answer 1

封面将拉伸您的图像以“覆盖”背景，因此您将永远看不到渐变，它也是背景图像。您可以将渐变设置为身体的背景，然后使用带有图像背景的容器DIV。

CSS：

#container{
  height: 100vh;
  background: url('https://static.vecteezy.com/system/resources/thumbnails/000/299/953/small/y2ok_2cif_180815.jpg') no-repeat;}

body {
  background-image: linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%); 
}

页：

<div id="container">

    // put page code in here like it was body

</div>

如何在背景图像之后放置线性渐变？

1 个答案: