這個問題在這里已經有了答案： 如何使用 CSS 為文本或影像賦予透明背景？ (33 個答案) 1 小時前關閉。
我有一個表格，我需要為其添加不透明的背景。不幸的是，不透明度也采用這種形式。如何從表單中洗掉不透明度并將其僅用于背景？
.container {
width: 100%;
height: 100%;
position: fixed;
visibility: visible;
display: block;
background-color: green;
top: 0;
left: 0;
opacity: 0.5;
}
.form {
width: 150px;
height: 200px;
background-color: blue;
display: flex;
flex-direction: column;
justify-content: center;
color: black;
align-items: center;
margin: 0 auto;
margin-top: 10px;
border-radius: 8px;
z-index: 2;
opacity: 1;
}<div class="container">
<div class="form">
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>uj5u.com熱心網友回復：
不要使用不透明度使用 rgba() 或 hsla()
.container {
width: 100%;
height: 100%;
position: fixed;
visibility: visible;
display: block;
background-color: rgba(0,0,255,0.5);
top: 0;
left: 0;
/* opacity: 0.5; do not use opacity.*/
}
我正在嘗試降低某些物件的不透明度，但它對我不起作用
uj5u.com熱心網友回復：
使用 rgba 顏色作為背景而不是不透明度
例如background-color: rgba(0, 0, 255, 0.5);
uj5u.com熱心網友回復：
只需使用帶有 alpha 的顏色。例如 rgba(255,0,0,0.5) 0.5 是你的不透明度值
uj5u.com熱心網友回復：
嗨，如果您的背景沒有任何影像。然后很容易你可以在它的背景上應用不透明度。這是您可以使用的一些示例->
background-color: #00ff0055;
/*-- The value after six digit is your alpha color or opacity of background.--*/
background-color: #0f05; /*-- Same as previous one.--*/
background-color: rgba(0,255,0,.5); /*-- a extend for alpha color--*/
希望這對您有所幫助。
uj5u.com熱心網友回復：
替換background-color: green;為background-color: rgba(0, 128, 0, 0.5);
它會簡單地解決它你可以直接將不透明度應用于顏色
uj5u.com熱心網友回復：
試試這個代碼：
.container {
width: 100%;
height: 100%;
position: fixed;
visibility: visible;
display: block;
background-color: green;
top: 0;
left: 0;
background-color: rgba(0,128,0,0.5);
}
.form {
width: 150px;
height: 200px;
background-color: blue;
display: flex;
flex-direction: column;
justify-content: center;
color: black;
align-items: center;
margin: 0 auto;
margin-top: 10px;
border-radius: 8px;
z-index: 2;
}<div class="container">
<div class="form">
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453262.html
上一篇：如何水平行內顯示卡片