html - 如何在 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 A number in the range 0.0 to 1.0, inclusive, or a percentage in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.

因此，根据规范，其中任何一个都应该没问题:

.foo {
  opacity: .3;
}

.foo {
  opacity: 30%;
}

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