Question

我有一个按钮背景calss。我需要多次使用它。一旦分开并且只更改了多次网址，我如何保持所有共同点？

这是我的css：

.menuBtnColour{
    position: relative; //common
    top: 0;//common
    left: 0;//common
    right: 0;//common
    bottom: 0;//common
    background-repeat: no-repeat;//common
    background-size: 50%;//common
    background-image: url(1.png); //can I keep this separated to be used together with the above?
}

Answer 1

假设您有三个带.menuBtnColour课程的按钮。您希望每个人都有三个不同的背景，并且您不希望使用内联CSS实现此目的。

你可以互相给予更具体的课程。例如：

<button class="menuBtnColour btn1"></button>
<button class="menuBtnColour btn2"></button>
<button class="menuBtnColour btn3"></button>

然后，设置.btn1，.btn2和.btn3类的样式。

CSS：

.menuBtnColour{
    position: relative; //common
    top: 0;//common
    left: 0;//common
    right: 0;//common
    bottom: 0;//common
    background-repeat: no-repeat;//common
    background-size: 50%;//common
}

.btn1{
    background-image: url(1.png);
}
.btn2{
    background-image: url(2.png);
}
.btn3{
    background-image: url(3.png);
}

多次使用背景图像类

1 个答案: