我想用 DNA 影像定義整個表格的背景影像，我想對整個表格使用默認顏色灰色，但我需要一些列使用白色。
如果我嘗試覆寫背景顏色，DNA 影像就會消失。
我已經用引導程式嘗試過這個：
HTML：
<div class="container mt-3">
<div class="row">
<div class="col-6 col-white">col1</div>
<div class="col-6 col-white">col2</div>
</div>
<div class="row">
<div class="col-6">col3</div>
<div class="col-6">col4</div>
</div>
</div>
CSS：
body{
background-color: yellow;
}
.container{
background-color: gray;
background-image: url('https://raw.githubusercontent.com/skoruba/css-bg-img/main/dna (1).png');
background-repeat: repeat-y;
background-position: 50px 0;
}
.col-6 {
padding: 20px;
}
.col-white {
background-color: white;
}
演示：
預期的：
如何僅覆寫背景顏色，而不覆寫背景影像？
uj5u.com熱心網友回復：
您可以將 DNA 作為重復背景添加到容器上的 after 偽元素中，將其定位在右側一點。
這將檢查所有內容，而不會影響其他任何內容的定位。
您需要設定容器的位置，以便它的偽元素可以相對于它定位自己。
將此添加到 CSS：
.container::after {
content: '';
position: absolute;
left: 50px;
top: 0;
width: 30px;
height: 100%;
background-image: url('https://raw.githubusercontent.com/skoruba/css-bg-img/main/dna (1).png');
background-repeat: no-repeat repeat;
background-position: center center;
}
并添加position: relative到 .container 但從那里洗掉背景影像。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/361301.html