CSS將不透明度添加到div的背景顏色而不是內容

我正在嘗試使用簡單背景顏色和div上的某些文本創建div。我想減少這個div的背景顏色的不透明度，但是當我這樣做時，div上文本的不透明度也發生了變化。有沒有辦法只改變背景顏色的不透明度？CSS將不透明度添加到div的背景顏色而不是內容

.main{ 
 
background-color: red; 
 
    width: 100%; 
 
    height: 200px; 
 
    opacity: 0.5; 
 
}

<div class="main"> 
 
    <p>Opacity of this text shouldn't be changed.</p> 
 
</div>

來源

2016-11-17 Harish

'背景-color：rgba（rr，gg，bb，0.5）'。 – 2016-11-17 05:57:53

此問題已被問到[** Here **]（http://stackoverflow.com/questions/16884398/how-to-change-the-background-colours-opacity-in-css）。在SO上發佈問題之前，先試着自己修復它，或者至少在Google上搜索它。我在回答這個問題。 –

對不起，我沒有看到。我會確保在下一次提問前做好適當的研究。 @MuhammadUsman – Harish

可以使用顏色的alpha信道，如下這是在RGBA

RGBA（255,0,0,0.1）/ * 10％不透明一個第四參數紅色/
RGBA（255,0,0,0.4）/ 40％不透明紅色/
RGBA（255,0,0,0.7）/ 70％不透明紅色/
RGBA（255,0,0，1 ）/完全不透明的紅色*/

注：Red將有255作爲第一個參數，其他爲0，你可以改變從0-1第四參數opacity

.main{ 
 
background-color: rgba(255,0,0,0.7); 
 
    width: 100%; 
 
    height: 200px; 
 
    /*opacity: 0.5;*/ 
 
}

<div class="main"> 
 
    <p>Opacity of this text shouldn't be changed.</p> 
 
</div>

來源

2016-11-17 06:02:32 Aruna

感謝您的明確解釋！ – Harish

@Harish我更新了你的代碼，你可以執行它來查看效果。 – Aruna

是的，我現在可以看到它。非常感謝:) – Harish

二手RGBA顏色值是RGB顏色值的擴展用alpha通道 - 它指定一個顏色的不透明度。

RGBA站的（紅，綠，藍，alpha）

.main{ 
 
background-color: rgba(255, 0, 0, 0.5); 
 
    width: 100%; 
 
    height: 200px; 
 
}

<div class="main"> 
 
    <p>Opacity of this text shouldn't be changed.</p> 
 
</div>

來源

2016-11-17 06:00:19

謝謝。有效！ @Manish – Harish

很高興幫助你:) –

.main{ 
 
background:rgba(220,0,0,0.2); 
 
    width: 100%; 
 
    height: 200px; 
 
}

<div class="main"> 
 
    <p>Opacity of this text shouldn't be changed.</p> 
 
</div>

您可以使用CSS這樣。

.main{ 
background:rgba(170,0,0,0.2); 
    width: 100%; 
    height: 200px; 
}

來源

2016-11-17 06:00:56

CSS將不透明度添加到div的背景顏色而不是內容

回答

相關問題