Quels sont les nouveaux modes de couleur en CSS3-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Quels sont les nouveaux modes de couleur en CSS3

青灯夜游

Apr 06, 2021 am 11:38 AM

css3 颜色模式

CSS a ajouté 3 nouveaux modes de couleur : 1. Le mode RGBA, qui ajoute une transparence Alpha au mode RVB, tel que "rgba(255,0,0,0.5)" 2. Le mode HSL, par exemple ; , "hsl(360,50%,50%)"; 3. Le mode HSLA, qui ajoute la transparence Alpha au mode HSL.

Quels sont les nouveaux modes de couleur en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

1. Méthode de représentation des couleurs CSS1&2 (norme W3C)

1. >Utilisez des mots-clés de couleur pour représenter les couleurs correspondantes)

Par exemple : rouge (rouge), bleu (bleu), rose (rose)

Avantages : Couleurs pratiques, rapides et spécifiques . Plus précis

Inconvénients :

　Indique un nombre limité de couleurs.

Ne prend pas en charge les couleurs transparentes

2. Mode HEX ( utilise l'hexadécimal pour représenter la couleur)

Syntaxe :

#RRGGBB 或 #RGB

Copier après la connexion

Valeur :

　RR : Valeur rouge. Entier positif hexadécimal

　GG : Valeur verte. Entier positif hexadécimal

　BB : Valeur bleue. Entier positif hexadécimal

plage de valeurs : 00-FF

Par exemple :

rouge #FF0000 jaune. #FFFF00

Avantages : Il existe de nombreux types de couleurs et il est plus pratique à utiliser

Inconvénients :

La conversion des unités hexadécimales est très problématique

Ne prend pas en charge couleurs transparentes.

Des couleurs spécifiques nécessitent une coordination des outils ou certaines connaissances en matière de mélange de couleurs

3. Méthode de correspondance des trois couleurs primaires RVB

Syntaxe：

RGB(R,G,B)

Copier après la connexion

Valeur :

　R : Valeur rouge. Entier positif | Pourcentage

G : Valeur verte. Entier positif | Pourcentage

　B : valeur bleue. Entier positif | Pourcentage

Plage de valeurs : 0~255 ou 0%~100%

Par exemple :

Rougergb(255,0,0)Jaunergb(255,255,0)

Avantages : Il existe de nombreux types de couleurs et il est plus pratique à utiliser

Inconvénients :

Ne prend pas en charge les couleurs transparentes

Des couleurs spécifiques nécessitent une coordination des outils ou un certain mélange de couleurs connaissances

2. Nouvelle méthode d'expression des couleurs CSS3

1. > Ce mode couleur est le même que RVB, sauf que la transparence alpha est ajoutée au mode RVB.
Syntaxe :

RGBA(R,G,B,A)

Copier après la connexion

Valeur :

　R : Valeur rouge. Entier positif | Pourcentage G : Valeur verte. Entier positif | Pourcentage

　B : valeur bleue. Entier positif | Pourcentage

　A : transparence alpha. La valeur est comprise entre 0 et 1.

Par exemple :

Rouge translucide

<style type="text/css">
    body{background:rgba(255,0,0,1)}
    div{width:300px;
        height:300px;
        background:rgba(0,0,255,0.4);
        position:absolute;
        top:0;
        left:0;
    }
</style>
<body>
    猜猜我在哪里
    <div></div>
</body>

Copier après la connexion

rgba(255,0,0,0.5)2. Mode HSL

(le mode roue chromatique n'a pas de transparence)<🎜. > Syntaxe :

HSL(H,S,L)

Copier après la connexion

Valeur :

H : Hue (teinte). –0 (ou 360) représente le rouge, 120 représente le vert, 240 représente le bleu et d'autres valeurs peuvent également être utilisées pour spécifier les couleurs. La valeur est : 0 - 360

　 S : Saturation. La valeur est : 0,0% - 100,0%

L : Légèreté. La valeur est : 0,0% - 100,0%

Par exemple :

Rouge

<style type="text/css">
    body{background:rgba(0,0,255,0.5);}
    div{width:300px;
        height:300px;
        background:hsl(140,50%,50%);
        position:absolute;
        top:0;
        left:0;
    }
</style>
<body>
    <div></div>
</body>

Copier après la connexion

hsl(360,50%,50%)

3. > (Le mode roue chromatique a une transparence)

Syntaxe :

HSLA(H,S,L,A)

Copier après la connexion

Valeur :H : Teinte (teinte). –0 (ou 360) représente le rouge, 120 représente le vert, 240 représente le bleu et d'autres valeurs peuvent également être utilisées pour spécifier les couleurs. La valeur est : 0 - 360

　 S : Saturation. La valeur est : 0,0% - 100,0%

L : Légèreté. La valeur est : 0,0% - 100,0%

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

Par exemple :

) Rouge

<style>
        body{background:HSL(0,100%,50%)}
        div{width:300px;
            height:300px;
            background:HSLA(230,100%,50%,0);
            position:absolute;
            top:0;
            left:0;
        }
    </style>
    </head>
    <body>
        猜猜我在哪里
        <div></div>
    </body>

Copier après la connexion

(Partage de vidéos d'apprentissage :

tutoriel vidéo CSS

)

hsl(360,50%,50%,0.5

3. Autres attributs

1. transparent

valeur de couleur spéciale, indiquant la couleur transparente. Peut être utilisé directement comme couleur.

Par exemple : color:transparent Définissez la couleur de la police sur transparent

<style type="text/css">
    body{background:hsl(270,100%,50%)}
    p{
        font-size:50px;
        font-family:"黑体";
        /*浏览器私有属性*/
        -webkit-text-fill-color:transparent;/*设置文本透明*/
        /*使用rgba(0,0,0,0);也可以实现全透明模式*/
        -webkit-text-stroke:2px yellow;/*将文本设置透明，再设置个边框后就实现镂空字了*/
        /*W3C标准属性*/
        /*text-fill-color:transparent;*/
        /*text-stroke:2px yellow;*/
    
    }
</style>
<body>
    <p>2012年过去了，最忙的是元芳，你怎么看？</p>
</body>

Copier après la connexion

Opacité

Attribut

Fonction : Paramètre La transparence de l'élément. Valeur : entre 0~1

注意：对于尚不支持opacity属性的IE浏览器

滤镜：filter:alpha(opacity=50) 仅限IE

<style>
    body{background:red}
    div{background:blue;
        width:300px;
        height:300px;
        opacity:0.5;
        position:absolute;
        top:0;
        left:0
    }
</style>
</head>
<body>
    看到我你就成功了
    <div></div>
</body>

Copier après la connexion

四、CSS3 颜色使用实例

background-image: -ms-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Mozilla Firefox */ 
     background-image: -moz-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Opera */ 
     background-image: -o-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Webkit (Safari/Chrome 10) */ 
     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D35644), color-stop(1, #31264D)) !important;/* Webkit (Chrome 11+) */ 
     background-image: -webkit-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* W3C Markup, IE10 Release Preview */ 
     background-image: linear-gradient(to bottom, #D35644 0%, #31264D 100%) !important; }

Copier après la connexion

1、模拟渐变效果

使用透明度来模拟渐变

<style>
    div{height:30px}
    div:nth-child(1){background:HSLA(120,100%,50%,0.1)}
    div:nth-child(2){background:HSLA(120,100%,50%,0.2)}
    div:nth-child(3){background:HSLA(120,100%,50%,0.3)}
    div:nth-child(4){background:HSLA(120,100%,50%,0.4)}
    div:nth-child(5){background:HSLA(120,100%,50%,0.5)}
    div:nth-child(6){background:HSLA(120,100%,50%,0.6)}
    div:nth-child(7){background:HSLA(120,100%,50%,0.7)}
    div:nth-child(8){background:HSLA(120,100%,50%,0.8)}
    div:nth-child(9){background:HSLA(120,100%,50%,0.9)}
    div:nth-child(10){background:HSLA(120,100%,50%,1.0)}
</style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

Copier après la connexion

使用饱和度模拟渐变

<style>
            div{height:30px}
            div:nth-child(1){background:HSLA(120,100%,50%,1)}
            div:nth-child(2){background:HSLA(120,90%,50%,1)}
            div:nth-child(3){background:HSLA(120,80%,50%,1)}
            div:nth-child(4){background:HSLA(120,70%,50%,1)}
            div:nth-child(5){background:HSLA(120,60%,50%,1)}
            div:nth-child(6){background:HSLA(120,50%,50%,1)}
            div:nth-child(7){background:HSLA(120,40%,50%,1)}
            div:nth-child(8){background:HSLA(120,30%,50%,1)}
            div:nth-child(9){background:HSLA(120,20%,50%,1)}
            div:nth-child(10){background:HSLA(120,10%,50%,1)}
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

Copier après la connexion

使用亮度来实现模拟渐变

<style>
    div{height:30px}
    div:nth-child(1){background:HSLA(120,100%,100%,1)}
    div:nth-child(2){background:HSLA(120,100%,90%,1)}
    div:nth-child(3){background:HSLA(120,100%,80%,1)}
    div:nth-child(4){background:HSLA(120,100%,70%,1)}
    div:nth-child(5){background:HSLA(120,100%,60%,1)}
    div:nth-child(6){background:HSLA(120,100%,50%,1)}
    div:nth-child(7){background:HSLA(120,100%,40%,1)}
    div:nth-child(8){background:HSLA(120,100%,30%,1)}
    div:nth-child(9){background:HSLA(120,100%,20%,1)}
    div:nth-child(10){background:HSLA(120,100%,10%,1)}
</style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

Copier après la connexion

使用背景颜色：

<style>
#div1 { width:200px; height:200px; border:1px solid #333;
background:-moz-linear-gradient(top, red, yellow);
background:-webkit-linear-gradient(top, red, yellow);
background:-ms-linear-gradient(top, red, yellow);
background:linear-gradient(top, red, yellow);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=red, endColorstr=yellow)";
+background:#f9f9f9;/*兼容IE9,8,7*/
}
</style>

</head>

<body>

<div id="div1"></div>

</body>

Copier après la connexion

更多编程相关知识，请访问：编程视频！！
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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille
2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7537

15

Tutoriel CakePHP

1380

52

Quel est le format du nom de compte de Steam

82

11

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

55

19

NYT Connexions Indices et réponses

21

86

Afficher plus

Related knowledge

Comment obtenir un effet de vague avec du CSS3 pur ? (exemple de code) Jun 28, 2022 pm 01:39 PM
Comment obtenir un effet de vague avec du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !

Utilisez habilement CSS pour réaliser divers boutons de forme étrange (avec code) Jul 19, 2022 am 11:28 AM
Cet article va vous montrer comment utiliser CSS pour réaliser facilement divers boutons aux formes étranges qui apparaissent fréquemment. J'espère que cela vous sera utile !

Comment masquer des éléments en CSS sans prendre de place Jun 01, 2022 pm 07:15 PM
Deux méthodes : 1. À l'aide de l'attribut display, ajoutez simplement le style "display:none;" à l'élément. 2. Utilisez les attributs position et top pour définir le positionnement absolu de l'élément afin de masquer l'élément. Ajoutez simplement le style "position:absolute;top:-9999px;" à l'élément.

Qu'est-ce que le mode couleur RVB ? Feb 28, 2023 pm 04:01 PM
Le mode couleur RVB est un mode d'affichage à l'écran ; sur le moniteur, le mode couleur RVB produit des couleurs en frappant les électrodes électroluminescentes rouge, verte et bleue de l'écran avec un pistolet à électrons. Les ordinateurs peuvent généralement afficher des couleurs 32 bits. avec environ plus d'un million de couleurs. Le mode couleur RVB est un mode de normalisation des couleurs qui utilise les trois couleurs de base que sont le rouge, le bleu et le vert pour produire d'autres couleurs en les superposant et en les mélangeant de différentes manières. Ces trois couleurs sont également les trois couleurs primaires qui produisent d'autres couleurs, et peuvent le faire. former toute la couleur vue.

Comment implémenter des bordures en dentelle en CSS3 Sep 16, 2022 pm 07:11 PM
En CSS, vous pouvez utiliser l'attribut border-image pour réaliser une bordure en dentelle. L'attribut border-image peut utiliser des images pour créer des bordures, c'est-à-dire ajouter une image d'arrière-plan à la bordure. Il vous suffit de spécifier l'image d'arrière-plan comme style de dentelle ; largeur de la bordure de l'image vers l'intérieur. Indique si le début est répété ;".

Il s'avère que le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur ! Jun 10, 2022 pm 01:00 PM
Comment créer un carrousel de texte et un carrousel d'images ? La première chose à laquelle tout le monde pense est de savoir s'il faut utiliser js. En fait, le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur. Jetons un coup d'œil à la méthode d'implémentation.

Comment agrandir l'image en cliquant sur la souris en CSS3 Apr 25, 2022 pm 04:52 PM
Méthode d'implémentation : 1. Utilisez le sélecteur ":active" pour sélectionner l'état du clic de la souris sur l'image ; 2. Utilisez l'attribut de transformation et la fonction scale() pour obtenir l'effet d'agrandissement de l'image, la syntaxe "img:active {transform : échelle (grossissement de l'axe x, grossissement de l'axe y);}".

Comment définir la vitesse de rotation de l'animation en CSS3 Apr 28, 2022 pm 04:32 PM
En CSS3, vous pouvez utiliser l'attribut "animation-timing-function" pour définir la vitesse de rotation de l'animation. Cet attribut est utilisé pour spécifier comment l'animation terminera un cycle et définir la courbe de vitesse de l'animation. La syntaxe est "element {. fonction de synchronisation d'animation : valeur de l'attribut de vitesse ;}".

See all articles