如何在 img 标签上创建渐变答案

【问题标题】：How to create a gradient over an img tag如何在 img 标签上创建渐变
【发布时间】：2012-04-06 13:59:31
【问题描述】：

我正在创建一个带有背景图像的网站，该背景图像需要根据浏览器窗口调整大小以匹配其高度。我使用以下代码来实现这一点：

<style type="text/css">
#background-image {
position: absolute;
right: 0;
top: 0;
height: 100%;
background-image: url('image.jpg');
z-index: -1;
}
</style>
<img id="background-image" src="image.jpg" />

现在我要做的是在此图像上应用渐变 - 使其在左侧淡化为白色 - 与图像的调整尺寸相匹配。有什么方法可以实现吗？

提前致谢！

【问题讨论】：

标签： html image gradient css

【解决方案1】：

看一下本站生成的代码：http://www.colorzilla.com/gradient-editor/

我想你也可以使用z-index 和 png 文件。

【讨论】：

谢谢，但问题在于将 div 的大小与渐变样式匹配或将 png 渐变与 img 匹配。
所以 CSS 方法应该可以工作。只需创建类，使用 img 标签，然后将其绘制在现有图像上。在这种情况下，您不需要图像或 div 的大小。
不幸的是，这种背景渐变不能简单地应用于 img 标签。

【解决方案2】：

你可以使用 CSS 来组合背景图片和渐变

url('image.jpg') 0 0 no-repeat 100% 100%, linear-gradient(top, #000000 0%, #ffffff 100%);

使用最适合您的价值观。

【讨论】：