Не удается ли установить фоновые настройки фона из фонового изображения?

Question

Чтобы уменьшить размер моего CSS-файла, я хотел разложить некоторые команды, например background-size. Скажем, у меня есть много разделов, как это:

#interlude { 
    background: url(https://.../unsplash.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

При использовании:

<div id="interlude"></div> 

Если у меня есть много разных «Interlude» дивы, все размеры, связанные строки в CSS дублируются. Я хотел бы получить что-то вроде этого:

#interlude { 
    background: url(https://.../unsplash.jpg) no-repeat center fixed; 
} 
.bw-back-cover { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

В этом случае bw-back-cover класс объявлен только один раз. Но это не работает, и я не знаю, что это нормальное поведение или нет.

Оба случая на Codepen

Answer 1

В случае Вашего CodePen, то сокращенная background свойства перекрывая всех фоновых связанные свойств, указанные не только те, - так background-size игнорируются, поскольку background имеет более высокий приоритет (находясь в ID по сравнению с классом).

Есть два способа исправить это.

1) Простой способ состоит в том, чтобы добавить !important в каждую строку объекта background-size, чтобы они не были перезаписаны стенографией background. (Тем не менее, я хотел бы предложить второе решение ниже, поскольку !important трудно отменить, если это необходимо.) Код:

.bw-back-cover { 
    -webkit-background-size: cover !important; 
    -moz-background-size: cover !important; 
    -o-background-size: cover !important; 
    background-size: cover !important; 
} 

2) Очиститель фикс будет разделить ваши свойства фона вместо того, чтобы использовать сокращенную, так background-size не перезаписывается. Код:

#interlude { 
    background-image: url(https://.../unsplash.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-attachment: fixed; 
}