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 */
}
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.
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 */
}
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％* / }
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.
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
FinallyThere 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!
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
In this week's roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and
Buy or build is a classic debate in technology. Building things yourself might feel less expensive because there is no line item on your credit card bill, but
You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser
In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's
Web Front-end
