兄弟画像をカバーする背景色を取得するには？

Question

ポストテキストコンテナの白い背景が、画像の底部を覆うように少し上に引っ張りたい（したがって、margin-top）。何らかの理由で、現在白ではなく、透明です。

What's going wrong？

body { 
 
    background-color:#EEF; 
 
} 
 

 
.post-container img { 
 
    max-width: 385px; 
 
} 
 

 
.post-text-container { 
 
    background: #ffffff; 
 
    padding: 15px; 
 
    margin-top: -65px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
}

<div class="post-container"> 
 
    <img src="//via.placeholder.com/350x100" alt="" id="feat-img" /> 
 

 
    <div class="post-text-container"> 
 

 
    <h2>Heading</h2> 
 
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
 

 
    </div> 
 
    <!-- End post-text-container --> 
 

 
</div> 
 
<!-- End post-container -->

Answer 1

あなたのスタイルシートが正常に動作しているようです。

body{ 
    background-color: #ccc; //something other than white 
} 

このスタイルを追加するには、あなたのbody要素またはpost-text-containerの親要素のbackground-colorが白ではありません確信していますか？

は、私はあなたが今何を意味するか見るこのJSFiddle

Answer 2

を参照してください。
問題は、stacking contextの不足が原因です。

私はposition:relativeを追加してスタッキングコンテキストを作成しました。

body { 
 
    background-color: #EEF; 
 
} 
 

 
.post-text-container { 
 
    position: relative; /* Added this */ 
 
    background: #ffffff; 
 
    padding: 15px; 
 
    margin-top: -65px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
}

<div class="post-container"> 
 

 
    <img src="//via.placeholder.com/350x100" alt="" id="feat-img" /> 
 

 
    <div class="post-text-container"> 
 
    <h2>Heading</h2> 
 
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
 
    </div> 
 

 
</div>

Answer 3

シンプルなソリューションのスタイルシート規則はdiv要素を含むpost-text-containerクラスに取り組んで放火魔で

1チェックされています。複数のスタイルシートがあるかもしれません。

2 divの上のすべての以前のルールを上書きします

.post-text-container{ background: #ffffff !important; }

のようなスタイルシートでpost-text-containerクラスのプロパティに!importantキーワードを追加します。お勧めできません

3は、あまりにもすることを試みた使用インラインスタイルシートタグ

<div class="post-text-container" style="background:#ffffff;">