指定不指定颜色

你如何指定不透明度background-color的在不改变现有背景颜色背景透明度？指定不指定颜色

例如，请考虑：

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>

我可以在div.light提供什么样的价值，改变的不透明度不覆盖/改变绿/蓝颜色的？就像一个background-alpha或background-opacity（不存在）

编辑：我不想改变不透明度为DIV 内容可言;只是背景。

编辑：我知道有涉及添加DOM的解决方案，但这就违背了设计的最佳实践（不使用DOM的风格）和我的目标只有一个CSS的解决方案。

来源

2017-07-19 Alex McMillan

我认为它不存在，但你可以做一个div.background与div的全尺寸，并与文字div.content，图像等，并添加opacity to div.background

来源

2017-07-19 21:31:43 EyWN

可以使用的背景，而不是伪元素并使用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>

来源

2017-07-19 21:32:05

指定不指定颜色

回答

相关问题