This article will introduce to you how to set transparency in CSS. Let’s take a look at the specific content.
Opacity and Transparency
By definition, opacity and transparency in CSS define the visibility of an element, whether it is an image, table, or RGBA (Red Green Blue alpha) color value. According to their meaning, opacity is a measure of how opaque or solid an element is, while transparency measures how easily you can see what's present in the layers beneath it. Regardless, they work the same way - 100% opaque means the element is completely visible, while 100% transparent means it is completely invisible.
Instead of using expensive software, you can create these effects using CSS! With a few simple keystrokes, you can instantly change the appearance of an element on your page, or in some cases even how it reacts when the mouse pointer hovers over it.
Opaque and transparent images
When modifying the image, the opacity property accepts values between 0.0 and 1.0, with the latter as the default value. Therefore, the lower the value, the more transparent the image becomes.
In the example below, we use 0.2, 0.5 and 1.0 for a side-by-side comparison:
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
} Note: We used the filter attribute because Internet Explorer Versions 8 and below do not yet recognize the opacity attribute.
Transparent Boxes and Tables
You can use the opacity property to add transparency to an element, including the background and all its child elements. For example, in the box below (using
instead of
and its children), all text also becomes transparent. 
The text will also push the background color to be transparent, so if that's what you want to achieve, there's no need to modify anything else. You can directly use the following code to achieve this effect:
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}Use RGBA for transparency
However, if you only want to change the background, and the text or other child elements will Keep it opaque and you can use RGBA to bypass it. If you're used to working with hex codes, you can learn about other ways to define colors in CSS, namely, RGB/RGBA and HSL/HSLA colors.
RGBA represents red, green and blue alpha, and the alpha parameter specifies the opacity of the RGB color. So, using RGBA color values, we can set the opacity of the background while the text remains black:
In the above example we used the RGB values 171,205,239 and then alpha Parameters define its transparency or transparency. For example: div { background：rgba（171,205,239,0.3）/ *蓝色背景，不透明度为30％* / }
css Opaque text in transparent background image
Another really cool thing you can do with opacity and transparency is to add text in a transparent box , probably to offset a really inappropriate or dark background image, as shown in the example below.
To create this simple yet effective style, use a element and name its classes "background" and "transbox". The first category is a background image and border, while the second category is a separate background color and border. Finally, add text using paragraphs.
First, we create a
element (class="background") with a background image and border. Then we create another
(class="transbox") inside the first
. The
element has a background color and a border - the div is transparent. In the transparent
, we added some text inside the
element.
Here is the code we used, you can modify and test it with your own images and text:
<html>
<head>
<style>
div.background {
background: url(green-tile.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<div>
<div>
<p>This is sample text placed in a transparent box.</p>
</div>
</div>
</body>
</html>Finally
There are many possible uses for opacity and transparency, Whether it's purely aesthetic or to emphasize elements on the web page. It's certainly the cheapest alternative to relying on Photoshop or other photo editing software to do all of this for you!
The above is the detailed content of How to set css transparency? Summary of setting methods for various transparency in css. For more information, please follow other related articles on the PHP Chinese website!
