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

我正在使用以下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与图像url分开吗？

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

在我看来，另一种方式将有一个梯度+图像精灵一起使用一些照片编辑工具，并使用它们在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/);
}

<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>

HTML:

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/);
}

<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>

---

演示：

一点主题-但可能足够有趣

如果使用更少的（>=v1.5.0），则可以使用

---

最后也是一样，CSS并没有提供这样的功能（我想）。

听起来与之类似。简而言之，没有直接的方法。您还可以查看一些预处理器（如Less），它们可以帮助使用合并语法，但编译后的CSS仍然会一样大。是否可以使用如下两层bg图像：`background image:'，url（）；`？是的，你可以看一下演示