Html 如何在CSS中按百分比定义不透明度？

是否可以在CSS中按百分比（如30%）定义不透明度？似乎不起作用，现在我只能按小数点进行

预期目标：

.test{
   opacity: 30%;
}

---

根据文档，它必须是一个介于0和1之间的数字

我不知道为什么你会想要一个百分比而不是这个数字，因为它们是相同的东西（只需除以100）。

否

0.0（完全透明）到1.0（完全不透明）范围之外的任何值都将限制在此范围内

---

如果确实要使用0到100的范围，可以自动计算小数点：

元素{
不透明度：钙（40/100）；
}

或者，您可以使用变量使其更清晰：

元素{
--不透明度：40；
不透明度：计算值（var（--不透明度百分比）/100）；
}

---

但是这两个都不象使用标准的小数那样清楚，所以除非有一个真正有效的理由，否则我不会推荐它们。

是的，如果你考虑<代码>过滤器< /C> < /P>是可能的。

.box{
滤镜：不透明度（30%）；
背景：红色；
高度：20px；
}

---

根据规范，使用百分比是完全有效的css：

alpha值

0.0至1.0范围内的

数字

，或0%至100%范围内的

百分比

，表示通道的不透明度（即其alpha通道的值）。区间之外的任何值（尽管有效）将被钳制到范围内最近的限制

因此，根据规范，这两个选项中的任何一个都应该是可以的：

.foo{
不透明度：.3；
}
傅先生{
不透明度：30%；
}

---

但是请记住，如果您使用的是Sass，它将不会处理

百分比

值，并将其编译为

1%

为什么？这些意思是一样的。。。。你必须遵循标准。从你自己的链接“值是一个从0到1的数字，代表通道（“alpha”通道）的不透明度。”他们实际上也是一样的东西，所以也不确定会有什么好处。只是好奇：为什么要在这里使用百分比来支持小数？我不认为这里的否决票是有理由的-一个有效的问题可能会有一个答案是“否”。一些浏览器不支持不透明度的百分比范围（边缘、狩猎……）请注意，

mozilla开发者网络

不是css标准的官方文档。百分比对于

opacity

属性来说是无效的css，与真正的官方文档相对应：这个sass错误让我在尝试十进制之前的半个小时一直困扰着我。完整的浏览器支持可以在：curren上看到这是自2019年末/2020年初以来唯一一款Edge、Firefox和Chrome浏览器

.test{
   opacity: 30%;
}