Html 如何使用CSS淡入半幅图像

平滑地淡出图像的一半，就像我看到的图片一样。不透明度不会使平滑褪色。

这是一个简单的解决方案：

html，正文{ 填充：0； 保证金：0； 宽度：100%； 身高：100%； 背景图像：urlhttps://www.itl.cat/pngfile/big/76-763664_cute-child-in-a-flower-field-4k.jpg; 背景尺寸：封面； 背景重复：无重复； 背景位置：中心； } div{ 背景：RGBA255255,0.9； 背景：-moz线性梯度左，RGBA255255,0.9 0%，RGBA255255,0.9 15%，RGBA255255,0 50%，RGBA255255,0.9 85%，RGBA255255,0.9 100%； 背景：-webkit gradientleft top，right top，color-stop0%，RGBA255255,0.9，color-stop15%，RGBA255255,0.9，color-stop50%，RGBA255255,0，color-stop85%，RGBA255255,0.9，color-stop100%，RGBA255255,0.9； 背景：-webkit线性梯度左，RGBA255255,0.9 0%，RGBA255255,0.9 15%，RGBA255255,0 50%，RGBA255255,0.9 85%，RGBA255255,0.9 100%； 背景：-o-线性梯度左，RGBA255255,0.9 0%，RGBA255255,0.9 15%，RGBA255255,0 50%，RGBA255255,0.9 85%，RGBA255255,0.9 100%； 背景：-ms线性梯度左，RGBA255255,0.9 0%，RGBA255255,0.9 15%，RGBA255255,0 50%，RGBA255255,0.9 85%，RGBA255255,0.9 100%； 背景：向右线性梯度，RGBA255255,0.9 0%，RGBA255255,0.9 15%，RGBA255255,0 50%，RGBA255255,0.9 85%，RGBA255255,0.9 100%； 过滤器：progid:DXImageTransform.Microsoft.gradient startColorstr='ffffff'，endColorstr='ffffff'，GradientType=1； 宽度：100%； 身高：100%； }

---

阅读：@TemaniAfif的maskduplicate比duplicate更相关您可以使用此网站生成渐变背景：这是一个很好的解决方案，但在OP案例中，我相信图像将更像背景图像是的，您是对的，这只是一个示例。您所需要做的就是在该图像上创建一个div层，并为该div使用渐变背景。如下所示：