html - 如何在 img 标签上创建渐变

Question

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

<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" />

现在我想做的是在这张图片上应用一个渐变——让它在左边变成白色——这与图像的调整尺寸相匹配。有什么办法可以做到这一点？

提前致谢！

Answer 1

只需查看此站点上生成的代码：http: //www.colorzilla.com/gradient-editor/

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

Answer 2

you can use CSS to combine both the background image and the gradient

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

with the values that work best for you.