Sass 的背景不透明度无 RGBA
Posted
技术标签:
【中文标题】Sass 的背景不透明度无 RGBA【英文标题】:Background Opacity No RGBA for Sass 【发布时间】:2014-10-21 13:35:33 【问题描述】:有没有办法在不使用 RGBA 的情况下使我的背景透明,以便我以后可以使用 Sass 变量更改颜色而不使包含的文本透明?
$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;
【问题讨论】:
【参考方案1】:您可以使用 Sass 函数为颜色添加透明度。
background: rgba($dark, 0.5);
或
background: transparentize($dark, 0.5);
或
background: fade-out($dark, 0.5);
Sass 有很多方便的 functions 用于处理颜色、字符串、数字、选择器等。
【讨论】:
【参考方案2】:不使用 rgba 没有多大意义。
IE8 不支持opacity
和rgba()
,只支持9 及以上版本(如果需要支持的话)。除了 IE8 接受 filter
之外,这在某种程度上可以作为透明度的解决方法。
如果不是这样,并且您根本不想使用,因为将十六进制转换为 rgb 很烦人(我也觉得很烦人),不用担心! SASS 接受 HEX #000
作为 rgba 的值并正确转换它,如下所示:
$dark: #000;
background-color: rgba($dark, .5); //outputs background-color: rgba(0,0,0,.5); in this case
但无论如何,这是一种在(您选择)之后/之前使用伪元素的方法。参考cmets:
$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
【讨论】:
【参考方案3】:您可以将 RGBA 与 sass 一起使用。为什么不想使用 RGBA?
background: rgba(0,0,0,0.5);
【讨论】:
以上是关于Sass 的背景不透明度无 RGBA的主要内容,如果未能解决你的问题,请参考以下文章