Image Transparency
This is a quick how-to for publishing images with a transparency.
Perhaps your image is overlaying text. Maybe overlapping other images. Or it's just too bright for the surrounding content.
Whatever reason you have for making an image all or partially transparent, it can be done with the CSS opacity property.
opacity:100%; | 100% opaque No transparency |
opacity:50%; | 50% opaque Half transparent |
opacity:0%; | 0% opaque Totally transparent |
As an illustration, the next three images have opacity:100%;, opacity:50%;, and opacity:25%;, respectively. You can see the differences.
I won't demonstrate an image with opacity:0%; because there would be nothing to see.
Here is the source code for the above three images:
<img src="https://www.willmaster.com/possibilities/images/flowerscompositionhyperdet_45528894.png" style="max-width:100%; opacity:100%;"> <img src="https://www.willmaster.com/possibilities/images/flowerscompositionhyperdet_45528894.png" style="max-width:100%; opacity:50%;"> <img src="https://www.willmaster.com/possibilities/images/flowerscompositionhyperdet_45528894.png" style="max-width:100%; opacity:25%;">
As you can see, it is fairly simple.
In your CSS, give your image the opacity property and state a percentage. The higher the percentage, the more opaque. And the less the percentage, the less opaque.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
