How to set css transparency? Summary of setting methods for various transparency in css-CSS Tutorial-php.cn

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:

How to set css transparency? Summary of setting methods for various transparency in css

img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

Copy after login

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.

How to set css transparency? Summary of setting methods for various transparency in css

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 */
}

Copy after login

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:

How to set css transparency? Summary of setting methods for various transparency in css

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％* / }

Copy after login

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.

How to set css transparency? Summary of setting methods for various transparency in css

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>

Copy after login

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!

Related labels：

css透明度

source：php.cn

Previous article：An introduction to CSS priority order Next article：What is the line-clamp property of css? how to use?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn