将渐变应用于所有具有内嵌背景图像 url 的图像？

Question

当我将线性渐变和 url 放在一起时，它工作正常：

HTML：

<div class="image" style="height:400px;width:400px;">

CSS：

.image {
    background: 
        linear-gradient(
          rgba(0, 26, 56, 0.7), 
          rgba(0, 0, 69, 0.7)
        ),
        url('http://incolor.inebraska.com/tgannon/grfs/birds256_oth/OwlGrH256x256.jpg');
}

JSFIDDLE： https://jsfiddle.net/5mb6hu3u/

但是当我单独使用它时，它不会工作：
HTML：

<div class="image" style="height:400px;width:400px;background: url('http://incolor.inebraska.com/tgannon/grfs/birds256_oth/OwlGrH256x256.jpg')">

CSS：

.image {
    background: 
        linear-gradient(
          rgba(0, 26, 56, 0.7), 
          rgba(0, 0, 69, 0.7)
        );
}

JSFIDDLE： https: //jsfiddle.net/5mb6hu3u/1/

有很多图像需要应用渐变，有什么方法可以在不使用<img>标签的情况下做到这一点？

Answer 1

据我所知，这是不可能完成的，因为渐变和图像本质上都是background-image，定义多个背景图像的唯一方法是使用逗号分隔的列表。

一个简单的解决方法是将渐变放在伪元素上，这样它将出现在图像上方（fiddle）：

.image {
    position: relative;
}

.image::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(
          rgba(0, 51, 102, 0.7), 
          rgba(0, 0, 51, 0.7)
        );
    content: '';
}