Html 背景不透明度无用于Sass的RGBA
有没有一种方法可以在不使用RGBA的情况下使我的背景透明,以便我以后可以使用Sass变量更改颜色,而不必使包含的文本透明Html 背景不透明度无用于Sass的RGBA,html,css,background,sass,opacity,Html,Css,Background,Sass,Opacity,有没有一种方法可以在不使用RGBA的情况下使我的背景透明,以便我以后可以使用Sass变量更改颜色,而不必使包含的文本透明 $dark: #000; $highlight: blue; nav { width:100%; background: $dark; opacity: .5; ul { li { margin: 0 3%; a { display: block;
$dark: #000;
$highlight: blue;
nav {
width:100%;
background: $dark;
opacity: .5;
ul {
li {
margin: 0 3%;
a {
display: block;
font-size: 1.4em;
&:hover {
color:$highlight;
}
}
}
}
}
您可以将RGBA与sass一起使用。为什么不想使用RGBA
background: rgba(0,0,0,0.5);
不使用rgba没有多大意义 IE8不支持
opacity
和rgba()。除了IE8接受过滤器
,这在某种程度上可以作为透明性的解决办法
如果不是这样,你只是不想使用,因为将十六进制转换成rgb很烦人(我也觉得很烦人),那就不用担心了!SASS接受十六进制#000
作为rgba的值,并将其正确转换,如下所示:
$dark: #000;
background-color: rgba($dark, .5); //outputs background-color: rgba(0,0,0,.5); in this case
但无论如何,这里有一种在(您选择的)之后/之前使用伪元素的方法。请参阅评论:
$dark: #000;
$highlight: blue;
nav {
width:100%;
background-color: transparent; //transparent or you won't see the color behind!
//needs to be relative or after will go outside nav bounds
position: relative;
z-index: 0;
//using after (or before) to fake the bg
&::after { //if you need to support IE8, use single colon instead. Standard is :: but IE8 just supports with one
content:"";
display: block;
//those two really could be just be
//"background-color: rgba($dark, .5);" you know
background: $dark;
opacity: .5;
//filter here if you want IE8 support
//making it fill entire nav
bottom: 0;
top: 0;
left: 0;
right: 0;
position: absolute;
//behind our nav
z-index: -1;
}
//ul and so on here
}
可以使用Sass函数为颜色添加透明度
background: rgba($dark, 0.5);
或
或
Sass有很多方便的操作颜色、字符串、数字、选择器等
background: transparentize($dark, 0.5);
background: fade-out($dark, 0.5);