Использование фона фонового изображения несколько раз

Question

У меня есть кнопочные фоны calss. Мне нужно использовать его несколько раз. Как сохранить все распространенные после разделения и изменить URL только несколько раз?

Это мой 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); 
}