色を指定せずに背景の不透明度を指定

Question

の不透明度をbackground-colorに指定するには、既存の背景色を変更せずにどうしますか？

たとえば、考えてみます。

私は緑/青の色を変更/上書きせずに不透明度を変更する div.lightに提供することができますどのような値

div { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
} 
 

 
.light { 
 
    background-color: rgba(?, ?, ?, 0.9) /* <--- what do I use here? */ 
 
}

<div class="blue"></div> 
 
<div class="green"></div> 
 
<div class="blue light"></div> 
 
<div class="green light"></div>

？ （存在しない）background-alphaまたはbackground-opacityような何か

編集：私は内容ですべてのdivのための不透明度を変更する必要はありません。ちょうど背景。

編集：私はDOMの追加を含む解決策があることを認識していますが、これは設計上のベストプラクティス（スタイリングにDOMを使用しない）に反し、CSS専用のソリューションを目指しています。

Answer 1

あなたが代わりに背景のための擬似要素を使用することができ、私はそれが存在していないと思いますが、あなたはテキストとdiv要素のフルサイズとdiv.contentでdiv.backgroundを行うことができ、画像などとopacity to div.background

Answer 2

を追加そして、使用opacity

div.blue::before { 
 
    background-color: blue; 
 
} 
 

 
div.green::before { 
 
    background-color: green; 
 
} 
 

 
div.light::before { 
 
    background-color: rgba(?, ?, ?, 0.9) 
 
} 
 

 
div::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    z-index: -1; 
 
} 
 

 
div { 
 
    position: relative; 
 
} 
 

 
.light::before { 
 
    opacity: .5; 
 
}

<div class="blue">blue</div> 
 
<div class="green">green</div> 
 
<div class="blue light">blue light</div> 
 
<div class="green light">green light</div>