是否有可能在CSS中定义不透明度的百分比(如30%)?好像不行,现在只能按小数点算了。
https://css-tricks.com/almanac/properties/o/opacity/
.test{
opacity: 0.3;
}
预期目标:
.test{
opacity: 30%;
}
是否有可能在CSS中定义不透明度的百分比(如30%)?好像不行,现在只能按小数点算了。
https://css-tricks.com/almanac/properties/o/opacity/
.test{
opacity: 0.3;
}
预期目标:
.test{
opacity: 30%;
}
6条答案
按热度按时间wfveoks01#
使用百分比是完全有效的css,根据规范: www.example.com
alpha-value
范围为0的number
。0到1.0(含),或percentage
(在0%到100%(含)范围内),表示通道的不透明度(即其Alpha通道的值)。任何在区间之外的值,尽管有效,但会被限制到该范围内最接近的限值。所以,根据规范,这两个都应该是好的:
但是请记住,如果您使用的是Sass,它不会处理
percentage
值,而是将其编译为1%
。dluptydi2#
如果你真的想使用0到100的范围,你可以自动计算小数:
或者你可以使用一个变量来使它更清晰:
但这两种方法都不如标准中所说的那样使用小数那么清楚,所以除非有真正有效的理由,否则我不会推荐它们。
gk7wooem3#
是的,如果您考虑
filter
,则有可能你甚至会有更好的表现,因为:
此函数类似于更成熟的不透明度属性;不同之处在于,对于过滤器,一些浏览器提供硬件加速以获得更好的性能。ref
只需注意一些与堆叠上下文相关的特殊行为:CSS-Filter on parent breaks child positioning
wsewodh24#
根据文档,它必须是0到1之间的数字。
https://developer.mozilla.org/en-US/docs/Web/CSS/opacityhttps://www.w3schools.com/cssref/css3_pr_opacity.asp
我不知道为什么你会想要一个百分比,而不是这个数字,因为它们是同一件事(只是除以100)。
jpfvwuh45#
不,只有小数。
范围0之外的任何值。0(完全透明)到1。0(完全不透明)将被限制在此范围内。
idfiyjo86#
不管most popular answer(和Mozilla)说什么,leoap和Charlie Harding的评论已经观察到不透明百分比没有官方支持。
W3没有提到不透明度的百分比,Can I Use显示了在真实的世界中对它的混合浏览器支持,除了最近的Chrome,Edge和Firefox。
因此,如果对哪些浏览器会看到您的内容有任何疑问,最好避免它并坚持使用小数。