CSS opacity() Function
opacity() function to make an image partially, or completely, transparent.
opacity() function is used with the
filter property to apply transparency to the samples in an image.
opacity() function requires an argument to be passed to it. This argument determines the proportion of the transparency that's applied to the image. The argument can be either a percentage value or a number.
Here's an example using a percentage value to make an image partially transparent:
Here's an example using a number:
The official syntax of the
opacity() function is as follows:
opacity() = opacity( [ <number> | <percentage> ] )
opacity() function accepts a
<percentage> as its argument. This argument determines the proportion of the conversion.
A value of
100% results in an image that's completely opaque (i.e. it's unchanged). A value of
0% results in an image that's completely transparent (i.e. you can't see it). Values between
100% are linear multipliers on the effect.
The specification allows amounts over
100%, but this will have no further effect on the image (i.e. the user agent will clamp it to
<number> value of
0.5 has the same effect as the
50%. A value of
1 is the same as
Negative values are not allowed.
opacity() Function vs
You might also be aware that there's an
opacity property, which does a similar thing to the
opacity function. However, there's a subtle difference between the two.
Here's what the specification says about this:
The opacity filter function is not meant to be a shorthand of the
opacityproperty. Furthermore, it allows setting the transparency of intermediate filter primitive results before passing to the next filter primitive. If the opacity filter function is set as last filter primitive, the value of the
opacityproperty is multiplied on top of the value of the filter function, which may result in a more transparent content.
The following table provided by Caniuse.com shows the level of browser support for this feature.