作为背景的CSS图象与覆盖的梯度颜色

Question

我有一张图片作为list-element的背景。

JSFiddle

我希望有一个渐变覆盖列表项的背景图像，它应该是透明的。

css前景，覆盖图像应该是这样的：

.listItem{
    background: linear-gradient(white, black);
    opacity: 0.2;
}

我无法在list-element周围包装div，因为框架不接受它。

Answer 1

Demo ..在 CSS

中尝试此操作

.listItem{
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), url('http://t0.gstatic.com/images?q=tbn:ANd9GcSEtKrXuUIiURHP7PFGY_cdYDXyuWhilTgWHkJxZRWAt3-tlSy6epfAAFQQ') no-repeat;
    background-size: cover;
}

您可以使用 RGBA 颜色，这比使用opacity属性的普通颜色要好得多

希望这会对你有所帮助

Answer 2

您可以在最后添加image url

.listItem{
    background: linear-gradient(white, black), url('/img/sampleImage.jpg') no-repeat;
}