Comment mélanger des éléments en CSS ?-tutoriel CSS-php.cn

Comment mélanger des éléments en CSS ?

WBOY

Libérer： 2023-09-14 12:13:02

avant

1549 Les gens l'ont consulté

Comment mélanger des éléments en CSS ?

Présentation

Les éléments mixtes en CSS sont une technique utilisée pour créer des effets visuels intéressants et améliorer la conception Web. En utilisant la propriété mix-blend-mode en CSS, vous pouvez contrôler la façon dont un élément se mélange avec le contenu en dessous. Dans cet article, nous explorerons comment utiliser le modèle mix-blend pour mélanger des éléments en CSS.

Découvrez les modes de fusion

mix-blend-mode est une propriété CSS qui vous permet de définir le mode de fusion d'un élément. Les modes de fusion déterminent la manière dont deux éléments sont mélangés, et différents modes produisent différents effets visuels.

Par défaut, le mode de fusion d'un élément en CSS est Normal, ce qui signifie qu'il apparaîtra normalement au-dessus des autres contenus. Mais en utilisant les modes de fusion, vous pouvez définir un mode de fusion différent pour un élément afin qu'il se mélange d'une manière spécifique avec le contenu situé en dessous.

Vous avez le choix entre plusieurs modes de fusion, chacun produisant des effets uniques. Voici un aperçu de certains des modes de fusion les plus couramment utilisés -

Normal - Mode de fusion par défaut qui affiche généralement les éléments au-dessus d'autres contenus
Multiply- Assombrir le contenu sous l'élément
Écran - Rendre le contenu situé sous l'élément plus lumineux
Overlay - Produisez une combinaison d'effets de multiplication et d'écran
Color Dodge - Rend le contenu situé sous un élément plus léger
Color Burn - Assombrir le contenu sous l'élément
Highlight - Produisez une combinaison d'effets de multiplication et d'écran en fonction de la luminosité du contenu sous-jacent
Soft Light - Produit un effet similaire à celui d'éclairer une lumière diffuse sur le contenu situé sous l'élément
Différence - Crée un effet qui met en évidence la différence entre un élément et le contenu en dessous
Exclusion - Produit un effet similaire à Différence, mais avec moins de contraste
Appliquer le mode Mélange

Pour appliquer le mode mix-blend à un élément en CSS, il vous suffit de définir la propriété sur le mode de fusion souhaité. Voici un exemple -

.blended-element {
   mix-blend-mode: multiply;
}

Copier après la connexion

Ce code définit le mode de fusion de la classe .blished-element pour qu'il se multiplie. Cela signifie que tout ce qui se trouve en dessous de cet élément sera assombri.

Vous pouvez également appliquer le mode mix-blend à l'arrière-plan d'un élément en utilisant l'attribut background-blend-mode. Cela vous permet de créer des effets intéressants avec des images d’arrière-plan et d’autres éléments sur la page.

.background-element {
   background-image: url('background-image.jpg');
   background-blend-mode: screen;
}

Copier après la connexion

Le code définit l'image d'arrière-plan de la classe .background-element sur background-image.jpg et background-blend-mode sur screen. Cela signifie que l'image d'arrière-plan sera éclaircie, créant un effet d'éclaircissement.

Exemple

<!DOCTYPE html>
<html>
<head>
   <title>Blending Elements in CSS</title>
   <style>
      .blended-element {
         background-color: #ff00ff;
         mix-blend-mode: multiply;
         width: 300px;
         height: 200px;
      }
      .background-element {
         background-image: url('background-image.jpg');
         background-size: cover;
         background-blend-mode: screen;
         width: 100%;
         height: 500px;
      }
   </style>
</head>
<body>
   <div class="blended-element">
      <h1>Blended Element</h1>
      <p>This element is using mix-blend-mode to darken the content beneath it.</p>
   </div>
   <div class="background-element">
      <h1>Background Element</h1>
      <p>This element is using background-blend-mode to lighten the background image.</p>
   </div>
</body>
</html>

Copier après la connexion

Instructions

Dans cet exemple, nous avons créé deux éléments div. Le premier div a une classe d'éléments mix et utilise mix-blend-mode:multiplier pour assombrir le contenu en dessous. Le deuxième div a une classe background-element et utilise background-blend-mode: screen pour rendre l'image d'arrière-plan plus lumineuse.
Nous avons également ajouté un style de base aux éléments en utilisant CSS. .blend-element a une couleur d'arrière-plan rose, tandis que .background-element a une image d'arrière-plan définie pour couvrir toute la largeur et la hauteur de la page.

Nous recommandons fortement aux lecteurs d'essayer tous les modes de fusion mentionnés pour mieux comprendre le sujet.

Conseils et remarques

Il y a quelques conseils et considérations à garder à l'esprit lors de l'utilisation du mode mix-blend -

Faites attention à l'effet des modes de fusion sur le contenu du texte. Les modes mixtes peuvent rendre le texte difficile à lire, il est donc important de tester l'impact sur le contenu du texte avant de l'implémenter sur un site Web en ligne.
Tous les navigateurs ne prennent pas en charge tous les modes de fusion. Vérifiez la compatibilité du navigateur avant d'utiliser des modes de fusion spécifiques.
Assurez-vous de tester le mode mix-blend dans différents contextes pour vous assurer qu'il produit l'effet souhaité.
Envisagez d'utiliser les modes de fusion d'arrière-plan et les modes de fusion Mix pour créer des effets visuels complexes.
En résumé, mix-blend-mode est un outil puissant pour créer des effets visuels intéressants en CSS. Avec les nombreux modes de fusion disponibles, vous

Conclusion

Cet article explique comment utiliser la propriété mix-blend-mode pour mélanger des éléments en CSS. Cet article donne un aperçu des modes de fusion et de leurs effets, et explique comment appliquer l'attribut mix-blend-mode aux éléments et arrière-plans 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!