我有几个相邻的,我想用CSS进行样式设计。我想应用各种各样的颜色作为背景,但我希望较低的颜色是相同的颜色,降低不透明度,所以我想到了这个:
span.foo{
background-color: rgba(0,0,0,1); /*or whatever*/
color:white;
}
span.foo:last-child{
background-color: rgba(*,*,*,0.5); /*just an example*/
}
所以我想通过使用CSS3来改变已经定义的背景的不透明度,而不影响文本的不透明度。
这可能吗?
如果您想使用现代CSS:
--color_rgb: 0, 0, 0;
background-color: rgba(var(--color_rgb), 0.5);
但是仍然不可能将alpha添加到给定颜色的中,如";一些其他样式表以RGB、十六进制或其他形式应用了这种颜色";。
我认为没有办法做到这一点。
Css本身是非常有限的,你不能用它做太多
添加不透明度的唯一方法是:
opacity: 0.5
但上述内容也会影响文本本身,而不仅仅是背景。
然而,您可以将其包装为将背景块与文本分开的方式,这样可以保持文本的颜色不变。
编辑:查看小提琴:http://jsfiddle.net/YfSn7/30/
但这看起来可能有点可笑,所以我不太建议使用它
如果你真的想让事情变得更简单而不是过于复杂,我想你必须接受这是不可能的。
如果你有Sass:
background-color: rgba(white, 0.5);
您可以使用CSS变量:
span.foo {
--background-color: 0, 0, 0;
background-color: rgba(var(--background-color), 1);
color: white;
}
span.foo:last-child {
background-color: rgba(var(--background-color), 0.5);
}
可以使用JavaScript完成,如下所示:
function adjustHexOpacity(color, opacity) {
const r = parseInt(color.slice(1, 3), 16);
const g = parseInt(color.slice(3, 5), 16);
const b = parseInt(color.slice(5, 7), 16);
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')';
}
没有任何方法可以做到这一点,值的过度重复是CSS的缺点之一。
因此,如果你的标准颜色是rgba(0,0,0,1);
,那么你需要rgba(0,0,0,0.5);
作为透明版本。
您也许可以用一点javascript来做类似于这个客户端的事情,但这并不完全干净。