Html 背景图像和响应元件上的径向梯度？

这是正在使用的图像：

这是我使用Vue.js、引导和CSS的实现：

模板

关于外星人动物园的经历

Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter，sed diam
非正常的临时性劳动和大规模劳动
埃拉特，塞德·迪亚姆·沃卢普塔。在vero eos和accusam和justo duo
多洛雷斯和埃雷姆。斯特特·克里塔·卡斯德·古伯格伦，没有大海
圣所

SCSS

.landing{
位置：相对位置；
高度：100vh；//背景色：#151515；
溢出x：隐藏；
.英雄形象{
位置：相对位置；
左：28%；
宽度：100%；
大小：封面；
}
.英雄形象：之后{
内容：“；
位置：绝对位置；
左：0；
排名：0；
宽度：30vh；
高度：100vh；
背景：线性梯度（93度，rgba（21,21,21,1）10%，rgba（0,0,0,0）50%）；
/*W3C*/
}
p{
填充顶部：32px；
填充底部：32px；
}
.详情{
位置：绝对位置；
z指数：2；
左：12%；
}
.背景{
显示：块；
高度：100vh；
宽度：100vw；
}
}
.移动外星人{
显示：无；
}
@仅介质屏幕和（最大宽度：768px）{
.着陆{
显示：无；
}
.移动外星人{
显示：块；
}
}
@仅介质屏幕和（最小宽度：1900px）{
.着陆，详情{
右：50%；
}
}

我的解决方法是将背景图像设置为普通图像标记，并在渐变图像标记上使用

：after

。使用绝对和相对，它也能保持响应，但我认为这不是正确的方法

我使用的图像本身没有任何渐变。所以我使用css应用了线性渐变。但我认为我必须在这里使用径向梯度，因为图像的角点也应该淡入黑色（这种黑色#151515）。我没有任何渐变的经验，无论我用radial尝试了什么都不起作用。使用上面的css，我已经能够达到一个相当不错的程度，但它看起来并不在最佳点

页面的背景色为#151515，正如您所见，我必须使用渐变将其淡入左侧

---

任何帮助都将不胜感激。谢谢。

使用CSS

背景图像

，您可以在降序

z-index

中指定单个元素上的多个层。使用逗号分隔图层，一个用于渐变，一个用于图像：

.bg{
背景图像：
径向梯度（圆形，rgba（0,0,0,0）25%，rgba（24,24,24,1）75%），
网址(https://i.stack.imgur.com/piK6l.jpg);
}

在您的示例中，图像和径向渐变都被推到右侧，您可以使用另一个逗号分隔的列表作为背景位置：

background-position: 200px, 200px;

这将留下一个空白区域，您需要灰色，因此请为该区域指定

背景色

：

background-color: rgba(24, 24, 24, 1);

下面是一个演示：

#应用程序{
宽度：100%；
高度：400px；
颜色：白色；
}
.bg{
宽度：100%；
身高：100%；
背景色：rgba（24,24,24,1）；
背景图像：
径向梯度（圆形，rgba（0,0,0,0）25%，rgba（24,24,24,1）75%），
网址(https://i.stack.imgur.com/piK6l.jpg);
背景位置：200px，200px；
背景重复：无重复；
背景尺寸：封面；
}

我的内容

你太棒了。谢谢你！！