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变量来简化此操作，然后您就可以轻松地分别更改每个元素的所有元素的渐变：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

我可以向子类添加其他背景属性吗？

1 个答案: