Home > Web Front-end > CSS Tutorial > How to set transparency in css

How to set transparency in css

王林
Release: 2023-01-06 11:13:36
Original
5750 people have browsed it

The way to set transparency in css is to add the opacity attribute to the element, such as [opacity:0.5;]. The opacity attribute sets the transparency level of an element. Transparency sets all content and elements to transparent.

How to set transparency in css

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

We usually have two ways to set transparency, the specific content is as follows:

background-color:rgba(r,g,b,a);

r:红
g:绿
b:蓝
a:透明度
Copy after login
background-color:rgb(r,g,b)
opacity:0.5;
Copy after login

Specific code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS中透明度设置</title>
    <style>
        /*不设置透明度*/
        .box1{
            background-color:rgb(217, 107, 116);
            font-size: 36px;
        }
        /*透明度为0.5*/
        .box2{
            background-color:rgba(217, 107, 116,0.5);
            font-size: 36px;
        }
        /*透明度为0.5*/
        .box3{
            background-color:rgb(217, 107, 116);
            font-size: 36px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div> 曾经的照片还留在那个房间</div>
<div> 曾经的照片还留在那个房间</div>
<div> 曾经的照片还留在那个房间</div>

</body>
</html>
Copy after login

Effect display:

How to set transparency in css

The difference between the two methods:

The transparency set by opacity will set all its contents and elements to be transparent, and the transparency set by rgba will only set the corresponding attribute. The operation is set to transparent.

The Opacity property sets the transparency level of an element.

Syntax:

opacity: value|inherit;
Copy after login

Attribute value:

  • value Specifies opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)

  • inherit The value of the Opacity attribute should be inherited from the parent element

Small example:

<style> 
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 and earlier */
}
</style>
Copy after login

Related videos: css video tutorial

The above is the detailed content of How to set transparency in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template