html - 如何在两个不同的属性上设置背景图片 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');
}