CSS - 将 div 淡入背景图像答案

【问题标题】：CSS - Fade div into background imageCSS - 将 div 淡入背景图像
【发布时间】：2020-02-06 12:02:32
【问题描述】：

有没有办法用 CSS 实现下面的设计？

transparent gradient example

它基本上是一个容器，带有一个background-image: url("...") 和一个在底部逐渐淡入透明的内部 div。

我知道如何使用linear-gradient(transparent, white) 使用单色背景进行淡出，但不使用上面示例中的背景图像。内部 div 的内容可能是任何东西，不仅仅是文字。

【问题讨论】：

不可能将不透明度应用于 div/或其内容或背景图像的部分，即使使用渐变也是如此。
@Awais 我不想要带有渐变叠加层的图像，这是您的链接所暗示的。相反，我希望内部 div 逐渐淡入透明。我更新了原始帖子中的图片，希望它更清楚我所追求的。
@Paulie_D 如果您有兴趣，我找到了解决我的特定问题的方法。请参阅下面的答案。

标签： css background-image gradient transparent fade

【解决方案1】：

好的，我找到了解决办法：mask-image: -webkit-gradient(...)

浏览器支持是 not optimal 虽然...

例子：

body {
  background: url('https://images.unsplash.com/photo-1531315630201-bb15abeb1653?w=500') center no-repeat;
  background-size: cover;
}

div {
  width: 200px;
  height: 150px;
  overflow: hidden;
  background: cyan;
  -webkit-mask-image: -webkit-gradient(linear, center top, center bottom, 
			color-stop(0.50,  rgba(0,0,0,1)),
			color-stop(1.00,  rgba(0,0,0,0)));
  mask-image: -webkit-gradient(linear, center top, center bottom, 
			color-stop(0.50,  rgba(0,0,0,1)),
			color-stop(1.00,  rgba(0,0,0,0)));
}

<div>
  	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

【讨论】：

【解决方案2】：

试试这个

内部 Div CSS 属性

background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.5));

【讨论】：

这会在内部 div 的顶部添加一个渐变叠加层。相反，我希望内部 div 逐渐淡入透明。我更新了原始帖子中的图片，希望它更清楚我所追求的。