The opacity of an element defines its transparency.
It determines how much of the background is visible through the element.
Opacity values range from 0 - 1 (transparent - opaque).
Two images: one normal, and the other with opacity.
<img src="/img/css/montmartre-sm.jpg"
style="margin: 10px;" />
<img src="/img/css/montmartre-sm.jpg"
style="margin: 10px; opacity: .5;" />
The opacity property sets the transparency of an element.
Its value ranges from 0 (transparent) to 1 (opaque).
Also accepted are percentages from 0% (transparent) to 100% (opaque.
Four images with different opacity values.
<img src="/img/css/montmartre-sm.jpg"
style="margin: 10px; opacity: 95%;" />
<img src="/img/css/montmartre-sm.jpg"
style="margin: 10px; opacity: 70%;" />
<img src="/img/css/montmartre-sm.jpg"
style="margin: 10px; opacity: 40%;" />
<img src="/img/css/montmartre-sm.jpg"
style="margin: 10px; opacity: 10%;" />
The transition property animates property values.
A transition can also smoothly change an element's opacity.
Hovering over the image changes its opacity.
<style>
.transition {
opacity: 50%;
transition: 0.3s ease;
cursor: pointer;
}
.transition:hover {
opacity: 100%;
}
</style>
<img src="/img/css/montmartre-sm.jpg"
class="transition" />
The filter property is used to add effects to images.
This property also accepts opacity values.
A filtered image using opacity.
<img src="/img/css/montmartre-sm.jpg"
style="filter:opacity(30%);" />
Another way to control opacity is with RGBA color values.
RGBA stands for Red, Green, Blue, Alpha, where Alpha is the transparency level.
The Alpha value ranges from 0 (opaque) to 1 (transparent).
The inner element has a white background with Alpha set to 0.5.
<style>
.foundation {
background-color: navy;
padding: 15px;
}
.rgba {
background: rgba(255, 255, 255, 0.5);
color: white;
padding: 15px;
}
</style>
<div class="foundation">
<div class="rgba">
This inside element is white
with a 50% transparency
</div>
</div>
