asp.net.ph

Skip Navigation LinksAbakada: Back to Basics > Language References > CSS Properties > Filter Functions > Opacity Filter Effect

Opacity Filter Effect


Sets the level of opacity for an input image.

Syntax:

{ filter: opacity( number | percentage ) }

Possible Values

number Absolute positive floating-point number or a relative percentage value.

The property is read/write with a default value of 1.

Remarks:

The opacity( ) CSS function adjusts the degree of an element’s opaqueness, which, in effect, applies transparency to the element.

The passed parameter defines the amount of deviation from the element’s default opacity.

A value of 1 or 100% leaves the input unchanged, while a value of 0 or 0% renders the input image completely transparent or blank.

Values between 0 and 1 or between 0% and 100% have linear multipliers on the effect. Lesser values reduce opacity, or increase transparency.

Values more than 1 ( or >100% ), and negative values ( < 0 ) are ignored and render the element unchanged.

Example

Opacity with values between 0 and 1 or between 0% and 100%.

filter: opacity(0)
filter: opacity(.25)
filter: opacity(.5)
 
filter: opacity(30%)
filter: opacity(60%)
filter: opacity(100%)

Opacity with a negative value or with a value more than 1 or more than 100%. Image is unchanged.

filter: opacity(-1)
filter: opacity(10)
filter: opacity(150%)
See Also

grayscale   hue-rotate   invert   saturate   sepia


Check out related books at Amazon

© 2025 Reynald Nuñez and asp.net.ph.

If you have any question, comment or suggestion,
please send us a note