Maison > interface Web > Tutoriel H5 > le corps du texte

Explication détaillée de l'utilisation du mode de fusion CSS3

php中世界最好的语言
Libérer: 2018-03-20 13:31:08
original
2949 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du mode mixte CSS3. Quelles sont les précautions lors de l'utilisation du mode mixte CSS3. Voici un cas pratique, jetons un oeil.

1. À propos des modes de fusion

Toutes les personnes familiarisées avec PS devraient connaître les modes de fusion :

Explication détaillée de lutilisation du mode de fusion CSS3

SVG et Canvas ont également des modes de fusion, qui sont essentiellement les mêmes.

Voici quelques algorithmes courants du mode de fusion :

Explication détaillée de lutilisation du mode de fusion CSS3

Il existe également des instructions sur le wiki. Si vous êtes intéressé, vous pouvez le découvrir.

Le contenu de cet article présente brièvement l'émergence de deux propriétés liées aux modes de mixage en CSS3, mix-blend-mode et background-blend-mode.

2. CSS3 mix-blend-mode

Tout d'abord, vous devez savoir que "blend-mode" signifie mode mix. Quant au mix, eh bien, je ne sais pas pourquoi il s’appelle mix. C’est peut-être parce que cet attribut peut être utilisé non seulement en HTML, mais aussi en SVG, donc autant l’appeler mix. Cette propriété CSS fait que le contenu d'un élément se « mélange » avec son arrière-plan et les éléments situés en dessous.

La compatibilité est la suivante :

Explication détaillée de lutilisation du mode de fusion CSS3

On constate que les navigateurs Chrome et FireFox récents le supportent déjà bien, et il n'est pas nécessaire de l'utiliser préfixes privés.

Il prend en charge de nombreuses valeurs. Les comparaisons chinoises et anglaises sont les suivantes :

mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度
mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //继承
mix-blend-mode: unset;           //复原
Copier après la connexion

Les trois dernières ont une forte saveur de sauce soja et ne sont pas apparues dans PS, vous pouvez donc les ignorer. .

Si vous souhaitez découvrir les performances de chaque mode de mixage, vous pouvez cliquer ici : Démo du mode mixte CSS3 mix-blend-mode

Par exemple, si vous sélectionnez Superposition, le texte et le suivant L'effet de mélange du contenu est le suivant :

Explication détaillée de lutilisation du mode de fusion CSS3

mix-blend-mode nous fournit une idée plus large pour réaliser certains effets de texte.

3. CSS3 background-blend-mode

background-blend-mode Cela doit être mieux compris, le mode de fusion d'arrière-plan. Il peut s'agir d'un mélange de l'image d'arrière-plan et de la couleur d'arrière-plan, ou d'un mélange de l'image d'arrière-plan et de la couleur d'arrière-plan.

La compatibilité est la suivante :

Les valeurs d'attribut prises en charge sont les mêmes que ci-dessus et ne seront pas affichées à plusieurs reprises.

Si vous souhaitez découvrir les performances de chaque mode de fusion, vous pouvez cliquer ici : CSS3 background-blend-mode Mixed Mode Demo

Par exemple, choisissez une multiplication commune, en conséquence , les deux filles ont fusionné :

Il est à noter que seules l'image d'arrière-plan et la couleur de l'attribut d'arrière-plan peuvent être mélangées, et cela ne peut être que dans un seul attribut d'arrière-plan.

Arrière-plans CSS3, plusieurs arrière-plans sont pris en charge par les navigateurs IE9+. Par conséquent, si vous souhaitez mélanger plusieurs images, il vous suffit de mettre des virgules et de les écrire une par une dans l'attribut background. Par exemple, les deux filles de cette démo :

.box {
    background: url(mm1.jpg) no-repeat center, url(mm2.jpg) no-repeat center; 
}
Copier après la connexion

.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Conseils pour utiliser max-width et min-width

Comment résoudre le problème des informations incomplètes affichage de la saisie de texte Android

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal