Question

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

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: '';
}

Answer 2

不一定是正确的，但是3年前就已经回答了。

我相信这取决于您使用的服务器端语言，但通常应正确内联。

以下是我的一个应用程序的示例，该示例是用php标签编写的：

style="background-image: -webkit-linear-gradient(135deg, transparent, #000), url({$sub_cat_img})"

对所有具有内嵌背景图像网址的图像应用渐变？

2 个答案: