我可以为子类添加额外的背景属性吗？

Question

我有一个 CSS 文件，其代码如下所示...

.button{
    width: 700px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-size: 50px;
    font-family: Gauge;
    color: white;
    border: rgba(255,255,255,0.3) 11px solid;
    box-shadow: 0 5px 10px white;
    text-shadow: 0 0 10px #000;
    margin: 15px 15px 15px 15px;
    transition: 0.4s
}

button.oneshot{
    background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed,
                url("oneshot.png") center 60%;

button.lisatp{
    background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed,
                url("lisa the painful.jpg") 45% 60%;
}
...
...

如您所见，子类 oneshot 和 lisatp 中有一行重复：

linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed

但是，由于每个子类也有一个图像作为背景，所以我找不到将重复的行放在.button 中的方法。

是否有可能以某种方式进一步简化这一点，或者这是否尽可能简单？

Answer 1

使用 CSS 变量来简化这一点，然后您将能够轻松地单独更改每个元素的所有元素的渐变：

.button{
    width: 700px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-size: 50px;
    font-family: Gauge;
    color: white;
    border: rgba(255,255,255,0.3) 11px solid;
    box-shadow: 0 5px 10px white;
    text-shadow: 0 0 10px #000;
    margin: 15px 15px 15px 15px;
    transition: 0.4s;
    --grad:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed;
    background:var(--grad);
}

.button.oneshot{
    background:var(--grad),url("https://lorempixel.com/400/200/") center 60%;
}

.button.lisatp{
    background: var(--grad),url("https://lorempixel.com/300/200/") 45% 60%;
}

.button.new-grad{
    --grad:linear-gradient(rgba(0,190,0,1),rgba(0,190,0,0.4),rgba(0,180,0,1)) no-repeat center center fixed;
    background: var(--grad),url("https://lorempixel.com/300/200/") 45% 60%;
}

<span class="button"></span>
<span class="button oneshot"></span>
<span class="button lisatp"></span>
<span class="button new-grad"></span>