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

Question

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

.test{
   opacity: 0.3;
}

预期目标：

.test{
   opacity: 30%;
}

Answer 1

alpha-valuenumber0.0 到 1.0（含）范围内的 A或percentage0% 到 100%（含）范围内的a ，表示通道的不透明度（即其 Alpha 通道的值）。区间之外的任何值，尽管有效，都被限制在范围内最接近的极限。

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

.foo {
  opacity: .3;
}

.foo {
  opacity: 30%;
}

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

请注意，“mozilla 开发者网络”不是 css 标准的官方文档。根据真正的官方文档，百分比对于 `opacity` 属性来说不是有效的 css：https://www.w3.org/TR/css-color-3/#transparency (3认同)
这个粗俗的错误困扰了我半个小时，直到我尝试了小数。 (2认同)
完整的浏览器支持可以在 [caniuse](https://caniuse.com/mdn-css_properties_opacity_percentages) 中查看：目前自 2019 年底/2020 年初以来仅发布了 Edge、Firefox 和 Chrome (2认同)

Answer 2

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

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

或者你可以使用一个变量来使其更清晰：

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

但这两者都比标准所说的仅使用小数更不清楚，所以除非有真正有效的理由，否则我不会推荐它们。