這個問題在這里已經有了答案：
![為什么 bootstrap 5 opacity-100 不作業？[復制]](https://img.uj5u.com/2022/01/09/7d251783e7a04dba845e740d3dbd661f.png)
我試圖將容器的不透明度設定為 0.3，將盒子設定為 1，但它不起作用：兩個 div 都有opacity-100.
<div class="row mt-1 mb-1">
<div class="col-md-2">
<div class="card text-white bg-dark mb-3 opacity-25">
<div class="opacity-100">
<div class="card-header opacity-100">Header</div>
<div class="card-body opacity-100">
<h5 class="card-title opacity-100">Dark card title</h5>
<p class="card-text opacity-100">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
我想要達到的效果是頁面頂部的彈出框。它通過淡化下面的內容（通過降低不透明度）來突出顯示。
uj5u.com熱心網友回復：
如果將不透明度設定為父級，則意味著父級內部的子級也看起來是透明的。
您可以rgba()改為使用來設定特定元素的字體或背景顏色。
.container {
background-color: rgba(0, 0, 0, .5);
padding: 30px;
width: 300px;
height: 300px;
}
.box {
background-color: red;
padding: 10px;
opacity: 1;
}<div class="container">
container
<div class="box">
box
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/406170.html
標籤：
上一篇：如何使固定輸入保持在底部？
下一篇：盡管路徑正確，但影像未顯示