如何在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

您可以使用CSS结合背景图像和渐变

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

使用最适合您的值。