CSS命名为rgba颜色 [英] CSS named rgba colors

问题描述

我想用不透明度定义颜色
我知道可以通过rgba颜色做到这一点，但我喜欢命名的颜色。例如：

  background-color：red;有没有办法组合这两个？
 
     c>>  c>  c>  cg>  / p> 
 
 
  background：red; 
 opacity：0.5; 
  
底层是opacity会影响子元素， rgba ，0,0,0.5）不会。
 
 
 
使用伪元素可以创建类似的效果。
 
 
 
 
 
 
  div {position：relative; height：30px;} div：first-child {background：rgba（255,0,0,0.5）; margin-bottom：10px;} div〜div：before {content：''; position：absolute; left：0; top：0; right：0; bottom：0;背景：红色;不透明度：0.5; z-index：-1;}  
 
 < div& Hello< / div>< div> Hello< / div>  
 
 
 
 
I would like to define colors with opacity
I know that it is possible to do this via rgba colors, but I like the ease of named colors. e.g.:
background-color: red;
Is there a way to combine the two?
解决方案
You can't use "red" in rgba(red,0.5) with standard CSS, but you can do
background: red;
opacity: 0.5;
The down side is that opacity will affect child elements, which rgba(255,0,0,0.5) will not.

By using pseudo element you can create a similar effect.



div {
  position: relative;
  height: 30px;
}
div:first-child {
  background: rgba(255,0,0,0.5);
  margin-bottom: 10px;
}
div ~ div:before {
  content: ' ';
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;
  background: red;
  opacity: 0.5;
  z-index: -1;
}

<div>Hello</div>
<div>Hello</div>





                        
这篇关于CSS命名为rgba颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！