列數塊中圖像上的文本覆蓋

Question

我正在嘗試在列數塊中的圖像上添加文本。 目標是在div框中將幾個圖像設置為column-count：2，並在div框中的圖像上放置一些文本。 我正在使用列數來使彼此之間具有不同高度的圖像很好地相互之間，而在它們之間沒有絲毫間隔。

首先，我只是將div中的圖像和文本添加到column-count div中。 我必須了解，如果我嘗試在圖像上添加相對位置和絕對位置的文本，以使文本與列div對齊，而不是與圖像的直接父級對齊。 今天，我想到將圖像放入背景中。 接縫是正確的方式，但是圖像的一部分在第一列行中，另一部分在第二行中。

到目前為止，這是我的代碼：

 body{ margin: 0; padding: 0; } .cc{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .cc-block{ background-repeat: no-repeat; background-position: center; background-size: cover; } .block_1{ background-image: url(https://via.placeholder.com/650x450/ff0000); width: 100%; height: 450px; } .block_2{ background-image: url(https://via.placeholder.com/650x250/ffff00); width: 100%; height: 250px; } .block_3{ background-image: url(https://via.placeholder.com/650x300/80ff00); width: 100%; height: 300px; } .block_4{ background-image: url(https://via.placeholder.com/650x450/00ffff); width: 100%; height: 450px; } .block_5{ background-image: url(https://via.placeholder.com/650x550/4000ff); width: 100%; height: 550px; } .block_6{ background-image: url(https://via.placeholder.com/650x150/ff00ff); width: 100%; height: 150px; } 

 <div class="cc"> <div class="cc-block block_1"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_2"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_3"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_4"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_5"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_6"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> </div> 

如您所見，第四張圖像已拆分。 顯然，這是由列數引起的，但是有一種方法可以在不分割背景圖像的情況下實現這一目的。 還是有更整潔的方式？

提前致謝！

Answer 1

您想添加break-inside: avoid-column; 到.cc-block類：

 body{ margin: 0; padding: 0; } .cc{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .cc-block{ background-repeat: no-repeat; background-position: center; background-size: cover; break-inside: avoid-column; -webkit-column-break-inside: avoid; } .block_1{ background-image: url(https://via.placeholder.com/650x450/ff0000); width: 100%; height: 450px; } .block_2{ background-image: url(https://via.placeholder.com/650x250/ffff00); width: 100%; height: 250px; } .block_3{ background-image: url(https://via.placeholder.com/650x300/80ff00); width: 100%; height: 300px; } .block_4{ background-image: url(https://via.placeholder.com/650x450/00ffff); width: 100%; height: 450px; } .block_5{ background-image: url(https://via.placeholder.com/650x550/4000ff); width: 100%; height: 550px; } .block_6{ background-image: url(https://via.placeholder.com/650x150/ff00ff); width: 100%; height: 150px; } 

 <div class="cc"> <div class="cc-block block_1"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_2"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_3"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_4"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_5"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> <div class="cc-block block_6"> <div> <h2>Some Heading</h2> <p>Some Paragraph</p> </div> </div> </div>