Comment définir l'opacité en HTML-tutoriel HTML-php.cn

Comment définir l'opacité en HTML

奋力向前

Libérer： 2021-10-06 20:00:26

original

8846 Les gens l'ont consulté

Méthode de paramétrage : 1. Utilisez la fonction RGBA(), la syntaxe « Attribut : RGBA (valeur rouge, valeur verte, valeur bleue, valeur de transparence) ; » 2. Utilisez l'attribut opacité, la syntaxe « opacité : valeur de transparence » ; ;". La valeur de transparence peut être définie entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).

Comment définir l'opacité en HTML

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment définir l'opacité en html ?

Méthode 1

rgba() Définir la transparence des couleurs

Grammaire :

rgba（R,G,B,A）;

Copier après la connexion

RGBA représente les trois mots Rouge (rouge) Vert (vert) Bleu (bleu) et Alpha (opacité) abréviation. Les valeurs de couleur RVBA sont une extension des valeurs de couleur RVB avec un canal alpha – qui spécifie l'opacité de l'objet. Introduction aux valeurs dans

rgba() :

R : valeur rouge. Entier positif (0~255)

G : valeur verte. Entier positif (0~255)

B : valeur bleue. Entier positif (0~255)

A : Transparence. La valeur est comprise entre 0 et 1

rgba() peut simplement définir la transparence des couleurs, qui a de nombreuses applications en mise en page. Par exemple : rendez l'arrière-plan transparent, mais le texte au-dessus est opaque. rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。

代码实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>rgba()</title>
        <style>
            .demo{
                width: 350px;
                height: 300px;
                margin: 50px auto;
            }
            .demo *{
                width: 120px;
                height: 120px;
                margin: 10px;
                float: left;
            }
            .demo1{
                background:rgba(255,0,0,1);
            }
            .demo2{
                background:rgba(255,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <div class="demo1">背景色不透明，文字不透明！</div>
            <div class="demo2">背景色半透明，文字不透明！</div>
        </div>
    </body>
</html>

Copier après la connexion

效果图：

Comment définir lopacité en HTML 、

方法二

opacity属性设置背景透明度

语法：

opacity: value ;

Copier après la connexion

value ：指定不透明度，从0.0（完全透明）到1.0（完全不透明）。

opacity属性具有继承性，会使容器中的所有元素都具有透明度；

代码实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>opacity属性</title>
        <style>
            .demo{
                width: 280px;
                height: 140px;
                margin: 50px auto;
            }
            .demo1,.demo2{
                width: 120px;
                height: 120px;
                margin: 10px;
                float: left;
                background:#2DC4CB;
            }
            .demo1{
                opacity:1;
            }
            .demo2{
                opacity:0.5;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <div class="demo1">
                <p>背景色不透明，文字不透明！</p>
            </div>
            <div class="demo2">
                <p>背景色透明，文字也透明！</p>
            </div>
        </div>
    </body>
</html>

Copier après la connexion

效果图：

Comment définir lopacité en HTML

opacity:0.5;使得demo2
Exemple de code :

rrreee

Rendu :

WeChat capture d'écran_20210930183128.png , Méthode 2

🎜Attribut d'opacité pour définir la transparence de l'arrière-plan🎜🎜🎜Syntaxe : 🎜🎜rrreee🎜value : Spécifiez l'opacité, à partir de 0.0 code> (entièrement transparent) à <code>1.0 (entièrement opaque). 🎜🎜L'attribut opacity est hérité et rendra transparents tous les éléments du conteneur 🎜🎜Exemple de code : 🎜rrreee🎜Rendu : 🎜🎜🎜 WeChat capture d'écran_20210930183523.png

WeChat capture d'écran_20210930183523.png

🎜🎜opacity:0.5;Créer tous les éléments de le conteneur demo2 apparaît translucide. 🎜🎜🎜Résumé : Bien que la méthode rgba() et la méthode d'opacité puissent obtenir des effets de transparence, rgba() n'agit que sur la couleur de l'élément ou sur sa couleur d'arrière-plan (les éléments enfants de l'élément avec la transparence rgb() définie le feront n'hérite pas de son effet de transparence) ; et l'opacité est héritable, ce qui affecte non seulement l'élément lui-même, mais rend également tous les sous-éléments de l'élément transparents. 🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo HTML🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!