サブクラスを使用して背景イメージを変更できますか？

Question

バックグラウンドイメージでスワップするサブクラスを指定する方法を教えてください。私はどちらかのサブクラスPOST1などでポストに依存して画像を変更したり、理想的にHTMLでそれを上書きしたいが、それは働いていない

.background-image-post{ 
    background-image:url('../images/posts/background-post.jpg'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 

} 

：

は、ここに私のCSSです。

どのような考えですか？

Answer 1

ここではサブクラスが間違った言葉です。あなたが必要とするのは、より高いレベルの特異性を作り出す「追加の」クラスだけです。

例：クラスbackground-image-postのすべてのdivは、プレースホルダーの背景を取得します。ただし、とphilクラスのdivは、より具体的にはなので、fillmurrayの背景を取得します。

.background-image-post{ 
 
    display: inline-block; 
 
    margin: 3px; 
 
    background-image:url('//placehold.it/200x200'); 
 
    width: 200px; 
 
    height: 200px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
} 
 

 
.background-image-post.phil { 
 
    background-image:url('//fillmurray.com/200/200'); 
 
}

<div class="background-image-post"></div> 
 
<div class="background-image-post phil"></div>