我有这个代码。这适用于 chrome 开发工具
p {
color: #00000070;
padding: 0px 10px;
position: relative;
z-index: 98;
}
当我尝试编译它时,出现此错误
[19:36:38] Using gulpfile ~/job/fello/gulpfile.js
[19:36:38] Starting 'sass'...
Error in plugin 'sass'
Message:
wp-content/themes/fellose/styles/layouts/_mypages.scss
Error: Invalid CSS after " color:": expected expression (e.g. 1px, bold), was "#00000070;"
on line 462 of wp-content/themes/fellose/styles/layouts/_mypages.scss
>> color: #00000070;
------------^
如果我输入任何其他值,例如#000000
或black
它就可以了。我认为这与我为不透明度放置最后一点有关。
颜色代码只有 3 (#000( 或 6 (#000000( 位数字值。 所以你只需要添加 3 或 6 位数字,如果你想添加不透明度,那就在rgba(0,0,0,0.6)
中定义颜色;
前三个数字用于颜色,最后一个浮点值用于不透明度。
CSS/SCSS不支持超过6位数字的颜色代码。我不确定为什么 chrome 开发工具允许这样做。
只需使用 color: rgba(0,0,0,0.7);
相反。
如果你想为其他颜色添加不透明度,但你不想将它们转换为 rgb,你也可以在那里使用 scss 变量:
$my-color: pink;
color: rgba($my-color,0.5);