バックグラウンドイメージとバックグラウンドイメージの関連付けが解除されていませんか？

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> 

私は多くの異なった「間奏」のdivを持っている場合は、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が高い優先度を持っているのでbackground-sizeが無視されています（IDとクラスの間にある）。

これを解決するには2通りの方法があります。

1）簡単な方法は、それらがbackground速記によって上書きされないようにbackground-size財産の各行に!importantを追加することです。 （必要に応じて!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; 
}