如何解决具有CSS颜色模块第4级的color函数的Alpha通道
我正在尝试使用Sass @mixin
,它提供对display-p3 color-space的支持,并且在不支持sRGB
时正常降级到display-p3
。当前,只有Safari支持此规范。
@mixin color-spaces($property,$color) {
$red: red($color);
$green: green($color);
$blue: blue($color);
$alpha: alpha($color);
@if $alpha == 1 {
#{$property}: rgb($red,$green,$blue);
#{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255));
} @else {
#{$property}: rgba($red,$blue,$alpha);
#{$property}:
rgba(
color(display-p3 ($red / 255) ($green / 255) ($blue / 255)),$alpha
);
}
}
在上面的@mixin
中,我假设如果颜色需要Alpha通道,我可以将color()
函数作为rgba()
函数的参数传递。下面是一些用法示例:
// Declarations
.foo {
@include color-spaces(background-color,#ff0);
@include color-spaces(color,rgb(255,100));
}
.bar {
@include color-spaces(border-color,#ffff);
@include color-spaces(color,rgba(0,80,160,0.5));
}
// Results
.foo {
background-color: #ff0;
background-color: color(display-p3 1 1 0);
color: rgb(255,100);
color: color(display-p3 1 0 0.39216);
}
.bar {
border-color: #ffff;
border-color: rgba(color(display-p3 1 1 1),1);
color: rgba(0,0.5);
color: rgba(color(display-p3 0 0.31373 0.62745),0.5);
}
我的假设不正确。将color()
函数作为参数传递给rgba()
参数是无效的。我也无法将第四个数字参数传递给color()
函数。它只接受三个。
在这种情况下,使用opacity
属性作为替代方法也不是合理的解决方案。将不透明度值传递给相关选择器将影响所有子元素的不透明度。
我很欣赏这是相当新的尝试。但是,没有人知道一种方法,通过该方法可以将Alpha通道与color()
函数结合使用,以实现display-p3
颜色空间的透明性?
解决方法
我找到了这个问题的答案。我会发布答案,以防将来随着该规范变得越来越普遍而对某人有所帮助。
似乎那里有冲突的信息... color()
函数能够接受第四个参数(对于alpha通道)。 CSS Tricks article的这个有用的Ollie Williams很好地解释了这一点。
正确的总谱如下:
color(display-p3 1 0 0 / 50%);
尽管这些是不同的色彩空间,但这大致等同于:
rgba(255,0.5);
这意味着我可以通过完全删除第二个@mixin
函数调用来更新rgba()
,并在上下文需要时仅依靠color()
函数传递一个alpha通道:
@mixin color-spaces($property,$color) {
$red: red($color);
$green: green($color);
$blue: blue($color);
$alpha: alpha($color);
@if $alpha == 1 {
#{$property}: rgb($red,$green,$blue);
#{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255));
} @else {
#{$property}: rgba($red,$blue,$alpha);
#{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255) unquote('/') ($alpha * 100%));
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。