CSS淡化背景图像

Question

是否可以将背景图像的底部淡化为透明？我会指定背景图像和线性渐变来实现这一目标吗？

谢谢！

Answer 1

不完全按照您描述的方式，但您可以考虑一些可能达到相同效果的可能性：

• 编辑图像，使透明度渐变成为图像的一部分。如果渐变总是相同，我们正在谈论单个图像，那么你应该这样做
• 不要在背景上淡化图像，而是将“背景”颜色放在图像上并在其上设置线性渐变（在同一容器中的另一个div或第二个背景中）
• 您可以查看淡出的CSS剪辑蒙版，请参阅https://css-tricks.com/clipping-masking-css/上的哈利波特示例，但我不确定浏览器支持。
• 也可以在SVG中创建渐变剪切蒙版（因此SVG包含指向图像文件的链接并具有剪贴蒙版）我猜这比上面的选项更广泛支持