如何在CSS中定义不透明度的百分比?

uplii1fm  于 2023-05-02  发布在  其他
关注(0)|答案(6)|浏览(306)

是否有可能在CSS中定义不透明度的百分比(如30%)?好像不行,现在只能按小数点算了。
https://css-tricks.com/almanac/properties/o/opacity/

.test{
   opacity: 0.3;
}

预期目标:

.test{
   opacity: 30%;
}
wfveoks0

wfveoks01#

使用百分比是完全有效的css,根据规范: www.example.com
alpha-value范围为0的number。0到1.0(含),或percentage(在0%到100%(含)范围内),表示通道的不透明度(即其Alpha通道的值)。任何在区间之外的值,尽管有效,但会被限制到该范围内最接近的限值。
所以,根据规范,这两个都应该是好的:

.foo {
  opacity: .3;
}

.foo {
  opacity: 30%;
}

但是请记住,如果您使用的是Sass,它不会处理percentage值,而是将其编译为1%

dluptydi

dluptydi2#

如果你真的想使用0到100的范围,你可以自动计算小数:

element {
  opacity: calc(40 / 100);
}

或者你可以使用一个变量来使它更清晰:

element {
  --opacity-percent: 40;
  opacity: calc(var(--opacity-percent) / 100);
}

但这两种方法都不如标准中所说的那样使用小数那么清楚,所以除非有真正有效的理由,否则我不会推荐它们。

gk7wooem

gk7wooem3#

是的,如果您考虑filter,则有可能

.box {
  filter:opacity(30%);
  background:red;
  height:20px;
}
<div class="box">

</div>

你甚至会有更好的表现,因为:
此函数类似于更成熟的不透明度属性;不同之处在于,对于过滤器,一些浏览器提供硬件加速以获得更好的性能。ref
只需注意一些与堆叠上下文相关的特殊行为:CSS-Filter on parent breaks child positioning

wsewodh2

wsewodh24#

根据文档,它必须是0到1之间的数字。
https://developer.mozilla.org/en-US/docs/Web/CSS/opacityhttps://www.w3schools.com/cssref/css3_pr_opacity.asp
我不知道为什么你会想要一个百分比,而不是这个数字,因为它们是同一件事(只是除以100)。

jpfvwuh4

jpfvwuh45#

不,只有小数。
范围0之外的任何值。0(完全透明)到1。0(完全不透明)将被限制在此范围内。

idfiyjo8

idfiyjo86#

不管most popular answer(和Mozilla)说什么,leoap和Charlie Harding的评论已经观察到不透明百分比没有官方支持。
W3没有提到不透明度的百分比,Can I Use显示了在真实的世界中对它的混合浏览器支持,除了最近的Chrome,Edge和Firefox。

因此,如果对哪些浏览器会看到您的内容有任何疑问,最好避免它并坚持使用小数。

相关问题