如何在两种不同的属性上设置背景图像url和梯度？

Question

我在带有单个属性的background-image的基础上添加了一个梯度：

background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5)), url('/image-1.jpg');

使用class .gradient的所有元素都具有梯度，但是每个元素的图像都会发生变化，因此我想知道是否可以将梯度设置为.gradient的属性，然后在每个元素中更改图像url。

<div class="gradient image-1"></div>
<div class="gradient image-2"></div>
<div class="gradient image-3"></div>

就像这样：

.gradient // Add the gradient just once
{
background-color: background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5);
}
.image-1 // Change the image for each element
{
background-image: url('/image-1.jpg');
}
.image-2
{
background-image: url('/image-2.jpg');
}

Answer 1

您无法只定义和覆盖多个background层中的一个，因此需要为每个层重新声明。

Demo

div {
    height: 100px;
    width: 100px;
    background: #eee;
    margin: 20px;
    background:  url('http://www.google.com/images/icons/product/chrome-48.png'), linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}

div:nth-of-type(2) {
    background:  url('http://www.digitalkonline.com/Portals/86261/images/agree-icon.png'), linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%)
}

实现这一目标的另一种方法是在父元素上使用background，在子元素上使用另一个background，因此可以使用嵌套技巧。

Demo 2

div.wrap {
    height: 100px;
    width: 100px;
    background: #eee;
    margin: 20px;
    background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}

div.wrap div {
    height: 100%;
    width: 100%;
}

div.hold > div.wrap:nth-of-type(1) > div {
    background:  url('http://www.digitalkonline.com/Portals/86261/images/agree-icon.png');
}

div.hold > div.wrap:nth-of-type(2) > div {
    background:  url('https://www.google.com/images/icons/product/chrome-48.png');
}

Answer 2

我不确定它是否适用于渐变。然而，当我们想要添加2个图像时，我使用背景大小:包含；

background-image: URL("../images/imageName1.png"), URL("../images/Icone/imageName2.png");
background-size:contain;
background-repeat: repeat-x, no-repeat;

第一个重复将是第一个图像，以此类推。