opacity()
Anonymous contributor
Anonymous contributor3071 total contributions
Anonymous contributor
Published Jul 13, 2021Updated Nov 26, 2023
Contribute to Docs
Controls how much of the background is visible through the element it is applied to.
Syntax
filter: opacity(<value>);
Here the required <value>
can be one of the following:
- Number value:
0
,1
- Percentage value:
25%
,50%
Note: Value defaults to 1
or 100%
, leaving the element unchanged. A value of 0
and 0%
will be completely transparent. Negative values and values greater than 1
or 100%
are not allowed.
Example 1
Set the opacity of our element to 50%
:
.banner-image {filter: opacity(50%);}
The first image on the left is the original, and the image on the right has the opacity
filter set to 50%
.
All contributors
- Anonymous contributorAnonymous contributor3071 total contributions
- robgmerrill124 total contributions
- giliopoulos3 total contributions
- christian.dinh2476 total contributions
- Anonymous contributor
- robgmerrill
- giliopoulos
- christian.dinh
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.