Question

我正在使用以下CSS块来定义应用于许多不同背景图像的渐变：

.myDiv{
    background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 28%), url(myimage.png);
}

问题是我有大约10个将使用此渐变的div。有没有办法在一个类中定义渐变，在另一个类中定义背景，以便我的代码不那么冗长？我试过了：

.myGradient{
   background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 28%);
}
.myDiv{
    background-image: url(myimage.png);
}

然后将这两个课程应用到我的div，但无济于事。是否可以将渐变css与图像网址分开？

Answer 1

我认为不可能将它们分开，因为渐变和图像都是background-image值。如果您在不同的类中使用它们，其中一个将覆盖其他。

在我看来，另一种方法是使用一些照片编辑工具将渐变+图像的精灵放在一起，并通过玩背景位置在10 div中使用它们。

另一种方法是使用pseudo这样的类：

<强> CSS：

div {
    width:300px;
    height:300px;
    background-repeat:no-repeat;
    position:relative;
    background-size:cover;
}
div:after {
    background-image:linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 28%);
    ;
    content:"";
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
}
.div1 {
    background-image: url(http://www.lorempixel.com/600/200/sports/1/);
}
.div2 {
    background-image: url(http://www.lorempixel.com/600/200/sports/2/);
}
.div3 {
    background-image: url(http://www.lorempixel.com/600/200/sports/3/);
}
.div4 {
    background-image: url(http://www.lorempixel.com/600/200/sports/4/);
}
.div5 {
    background-image: url(http://www.lorempixel.com/600/200/sports/5/);
}
.div6 {
    background-image: url(http://www.lorempixel.com/600/200/sports/6/);
}
.div7 {
    background-image: url(http://www.lorempixel.com/600/200/sports/7/);
}
.div8 {
    background-image: url(http://www.lorempixel.com/600/200/sports/8/);
}
.div9 {
    background-image: url(http://www.lorempixel.com/600/200/sports/9/);
}
.div10 {
    background-image: url(http://www.lorempixel.com/600/200/sports/10/);
}

<强> HTML：

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div class="div9"></div>
<div class="div10"></div>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/738/

Answer 2

一些话题 - 但也许有趣......

如果您使用less（＆gt; = v1.5.0），则可以使用property merging with the plus operator。

最后它是相同的，CSS没有提供这样的功能（我认为）。

在一个类中定义背景渐变而在另一个类中定义背景图像？

2 个答案: