"parent" divでCSSカバーが動作しないのはなぜですか？

Question

もちろん、複数のDOM要素で使用されるクラスがあります。 クラス.highlightを作成し、各ハイライトdivにユニークなidを追加しました。

.highlight { 
    height: 520px; 
    width: 100%; 
    padding: 0; 
    display: table; 
    overflow: hidden; 
    border: none; 
} 
.highlight#pixel { 
    background: url('../images/pixel.jpg') no-repeat center; 
} 

各IDには、CSSを使用してbackground-imageが割り当てられています。私はCSSのプロパティbackground: cover;を使用して、画像のすべてのスペースを埋めることを望みます。

idが同じdivに追加されているので、divプロパティ.highlightにカバープロパティを追加するとうまくいくと思っていたので、毎回CSSプロパティの各IDにカバープロパティを追加する必要はありません。しかし、これは動作しません。これがうまくいかない理由

私は、次について話す：

.highlight { 
    height: 520px; 
    width: 100%; 
    padding: 0; 
    display: table; 
    overflow: hidden; 
    border: none; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.highlight#pixel { 
    background: url('../images/pixel.jpg') no-repeat center; 
} 

のthnx！

Answer 1

background: url('../images/pixel.jpg') no-repeat center; 

これは以前、以下の特定のセレクタ.highlightでbackground-sizeルールを上書きします。例えば、画像を宣言するときに代わりに.highlight#<id>に速記を使用しての、あなたはすべての.highlight要素の背景のデフォルト値を設定するためにそれを使用することができ、その後、具体的に：

.highlight { 
    ... 
    background: no-repeat center/cover; 
} 

.highlight#pixel { 
    background-image: url('../images/pixel.jpg'); 
} 

Answer 2

すべてのバックグラウンドのプロパティが上書きされますbackground速記CSSを使用します.highlight以下です。あなたのidの特定のdivのために、shortandではなく、完全なバックグラウンドのプロパティを使用してください。

.highlight#pixel 
{ 
    background-image: url(''); 
    ... 
} 

などです。