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的属性然后更改每个元素中的图像网址。

<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

我不确定它是否适用于渐变。但是，当我们想要添加2个图像时，我使用background-size：contains;

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

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

Answer 2

您无法定义和覆盖多个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');
}

如何在两个不同的属性上设置背景图像网址和渐变？

2 个答案: