6.4: Image Transparency
- Page ID
- 93817
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)
Image Transparency/Opacity
With CSS you can change the transparency/opacity of images to enhance the look of your page. Currently, Internet Explorer 8 and earlier use a different technique for applying image transparency than Firefox, Chrome, and other Internet browsers. Style properties for the browsers are shown in the table below.
Property: | Value | Description |
opacity | x x can be a value between 0.0 - 1.0. A lower value makes the element more transparent. |
Changes the transparency/opacity of an image. This property is supported by all major browsers including IE9 and later. |
filter:alpha(opacity=x)) | x x can be a value from 0 - 100. A lower value makes the element more transparent |
Changes the transparency/opacity of an image. ** Currently this property is used only by IE8 and earlier versions. |
The following example demonstrates how to use the transparency properties in both IE and other browsers