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

Question

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

https://css-tricks.com/almanac/properties/o/opacity/

.test{
   opacity: 0.3;
}

预期目标：

.test{
   opacity: 30%;
}

Answer 1

根据规范，使用百分比是完全有效的CSS： https://developer.mozilla.org/en-US/docs/Web/CSS/opacity#Values

alpha-value number的范围为0.0到1.0（含）或percentage的范围为0％到100％（含），表示通道的不透明度（即其Alpha通道的值） 。间隔之外的任何值（尽管有效）都被钳位到该范围内的最接近极限。

因此，根据规范，这两个都应该没问题：

.foo {
  opacity: .3;
}

.foo {
  opacity: 30%;
}

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

Answer 2

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

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

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

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

但是，这两种方法都不能像标准中所说的那样仅使用小数点来表示，因此除非有确凿的理由，否则我不会推荐它们。

Answer 3

是的，如果您考虑使用filter

.box {
  filter:opacity(30%);
  background:red;
  height:20px;
}

<div class="box">

</div>

您甚至会获得更好的性能，因为：

  

此功能类似于已建立的不透明度属性；区别在于使用过滤器时，某些浏览器可提供硬件加速以提高性能。 ^ref

---

只需注意一些与堆栈上下文有关的特殊行为：CSS-Filter on parent breaks child positioning

Answer 4

根据文档，它必须是0到1之间的数字。

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity https://www.w3schools.com/cssref/css3_pr_opacity.asp

我不确定您为什么会选择百分比而不是这个数字，因为它们是同一件事（只需除以100）。

Answer 5

不，decimals only。

  

任何超出0.0（完全透明）到1.0（完全不透明）范围的值都将被限制在此范围内。