What is Opacity?
Opacity is a HTML, CSS, and WikiText attribute used to raise or lower the opacity of a coded element, like a badge. Opacity is often used in popups and floating boxes—to make content behind slightly visible.
An important note: Using opacity as an attribute changes the ENTIRE opacity of the element—text color, background, border color, EVERYTHING. Use RGBA as the color if you want a certain color to be more or less opaque.
How to use Opacity
To use opacity, type in:
opacity: *percentage*%;
Replace *percentage* with a number 0-100. The higher the number, the more opaque. For example, 98% would be very opaque, and 5% would be very transparent. In the examples, we have 25%, 50%, 75%, and 100% Opacity, but you can do other percentages!
Opacity does not work in span style tags.
Examples
Editors, please feel free to add to the following codes!
Red Background
The code for this:
<div style="background: red; opacity: 50%">50% Opacity</div>
Orange Background
The code for this:
<div style="background: orange; opacity: 50%">50% Opacity</div>
Yellow Background
The code for this:
<div style="background: yellow; opacity: 75%; color: white">75% Opacity</div>
Green Background
The code for this:
<div style="background: green; opacity: 50%">50% Opacity</div>
Blue Background
The code for this:
<div style="background: blue; opacity: 50%">50% Opacity</div>
Purple Background
The code for this:
<div style="background: purple; opacity: 50%">50% Opacity</div>
Rainbow Gradient Background
The code for this:
<div style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple); opacity: 50%">50% Opacity</div>
Image and Badge examples
Opacity is useful in floating boxes—in different device formats sometimes boxes can cover content:
The code for this:
<div style="position: fixed; top: 50px; right: 0px; font-size: 10.5px; color: black; background:rgb(255,255,255, 0.80);">CONTENT</div>
So, you can see that the wiki background shows through that floating box.