How to define Opacity by percentage in CSS?

Question

Is it possible to define opacity in CSS by percentage (eg 30%) in CSS? does not seem to be working, right now I can only conduct it by decimal point.

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

.test{
   opacity: 0.3;
}

Intended Goal:

.test{
   opacity: 30%;
}

Answer 1

Using a percentage is fully valid css, according to the spec: 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.

So, either of these should be okay, according to spec:

.foo {
  opacity: .3;
}

.foo {
  opacity: 30%;
}

Keep in mind, though, that if you are using Sass, it will not handle the percentage value, and will compile it to 1%.