Table des matières
? Exemple de base: mélange du texte avec l'image d'arrière-plan
Html
CSS
? Description de l'effet
✅ Notes
? Petite expérience: comparaison de plusieurs modes mixtes
Maison interface Web tutoriel CSS Exemple de mode mélange de mélange CSS

Exemple de mode mélange de mélange CSS

Aug 08, 2025 pm 12:59 PM
css Mode mixte

L'attribut en mode mélange de mélange est utilisé pour contrôler l'effet de mélange de la teneur en élément et de l'arrière-plan. 1. Utilisez Multiplier pour atteindre le chevauchement du texte et de l'image d'arrière-plan; 2. L'écran éclaire l'image et convient aux arrière-plans sombres; 3. La superposition améliore le contraste, combinant les fonctionnalités multipliées et écran; 4. La différence crée un contraste fort, qui convient au design créatif; Il est nécessaire de s'assurer que les éléments se chevauchent et l'ordre d'empilement de l'indice Z

Exemple de mode mélange de mélange CSS

La propriété mix-blend-mode de CSS est utilisée pour contrôler comment le contenu d'un élément et tout ce qui s'y attend (y compris d'autres éléments et arrière-plans) sont mélangés avec des couleurs lors du chevauchement. Il est souvent utilisé pour créer des effets de conception avec un fort impact visuel, comme la pénétration de texte, la fusion de couche, etc.

Exemple de mode mélange de mélange CSS

Ce qui suit est un exemple simple mais pratique pour démontrer l'utilisation du mix-blend-mode .


? Exemple de base: mélange du texte avec l'image d'arrière-plan

Html

 <div class = "conteneur">
  <div class = "text"> mélange </div>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175462914638114.jpeg"  class="lazy"  src = "https://picsum.photos/800/400" alt = "Image de fond" class = "bg-iMage">
</div>

CSS

 .Container {
  Position: relative;
  Largeur: 100%;
  hauteur: 400px;
  Color d&#39;arrière-plan: blanc; / * Couleur d&#39;arrière-plan * /
}

.bg-iMage {
  Position: absolue;
  en haut: 0;
  à gauche: 0;
  Largeur: 100%;
  hauteur: 100%;
  FIT d&#39;objet: couverture;
  Z-Index: 1;
}

.texte {
  Position: absolue;
  en haut: 50%;
  Gauche: 50%;
  Transformer: traduire (-50%, -50%);
  taille de police: 120px;
  Police-poids: Bold;
  Couleur: noir;
  Z-Index: 2;
  Mode de mélange de mélange: Multiplier; / * Clé: mode mixte * /
  Texte-aligne: Centre;
  marge: 0;
  Color d&#39;arrière-plan: blanc; / * Facultatif: comparaison améliorée * /
}

? Description de l'effet

  • mix-blend-mode: multiply; Fera la zone de texte et l'image derrière "Multi-Film Bottom", la partie sombre est plus évidente et la couleur claire devient transparente.
  • Autres valeurs couramment utilisées:
    • screen : éclairer, adapté aux arrière-plans sombres.
    • overlay : combiner multiplier et écran pour améliorer le contraste.
    • difference : produit un effet très contrastant et est souvent utilisé dans la conception créative.

Vous pouvez essayer de remplacer la valeur mix-blend-mode .text pour voir les différents effets.

Exemple de mode mélange de mélange CSS

✅ Notes

  • Pour voir l'effet du mix-blend-mode , l'élément doit se chevaucher avec d'autres contenus (comme le conteneur parent a un arrière-plan, des éléments de frère, etc.).
  • z-index et position sont importants pour assurer l'ordre de boîtier correct.
  • Dans les dispositions complexes, isolation: isolate; Peut être utilisé pour contrôler la plage de mélange.

.container exemple, ajouter:

 .Container {
  Isolement: isolat; / * Empêcher le mélange de dépasser le conteneur * /
}

? Petite expérience: comparaison de plusieurs modes mixtes

 .Text-Overlay {
  MODE-MODE-MODED: superposition;
  Couleur: rouge;
}

.Text-écran {
  MODE-MODE-MODED: Écran;
  Couleur: noir;
}

.Text-différence {
  Mode de mélange de mélange: différence;
  Couleur: blanc;
}

La correspondance avec différentes couleurs et arrière-plans peut créer des effets visuels au niveau de l'affiche.

Exemple de mode mélange de mélange CSS

Fondamentalement, c'est tout. mix-blend-mode n'est pas compliqué, mais il est facile d'ignorer les effets du contexte en cascade et de l'index z. Essayez plusieurs autres modes et différents arrière-plans, et vous pourrez bientôt jouer des tours.

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Sujets chauds

Tutoriel PHP
1596
276
Comment créer une bordure en pointillé en CSS Comment créer une bordure en pointillé en CSS Aug 15, 2025 am 04:56 AM

Utilisez CSS pour créer des bordures pointillées, il suffit de définir l'attribut de bordure aux pointillés. Par exemple, "Border: 3pxdotted # 000" peut ajouter une bordure à point noir de 3 pixels à l'élément. En ajustant la largeur des frontières, la taille du point peut être modifiée. Les frontières plus larges produisent des points plus importants. Vous pouvez définir des bordures pointillées pour un certain côté, comme "Border-top: 2pxdottedDred". Les bordures en pointillés conviennent aux éléments au niveau du bloc tels que Div et Entrée. Ils sont souvent utilisés dans les états d'intérêt ou les domaines modifiables pour améliorer l'accessibilité. Faites attention au contraste des couleurs. Dans le même temps, différent du style courte de la ligne courte, en pointillés présente une forme de point circulaire. Cette fonction est largement utilisée dans tous les navigateurs traditionnels.

Comment utiliser les gradients CSS pour les arrière-plans Comment utiliser les gradients CSS pour les arrière-plans Aug 17, 2025 am 08:39 AM

CssgradientProvidesMoothColOrTransitionwithOrtimages.1.LeargradientSitransitionColorsAlongastraightLinedDirectionsliketobottomorangleslike45deg, andsupportmultiplecolorstopsforculeo

Comment changer le style de liste dans CSS Comment changer le style de liste dans CSS Aug 17, 2025 am 10:04 AM

Pour modifier le style de liste CSS, utilisez d'abord le type de style liste pour modifier la balle ou le style de numérotation. 1. Utilisez du type de style liste pour régler la balle de UL à disque, cercle ou carré, et le nombre d'OL est décimal, inférieur alpha, haut-alpha, inférieur-romain ou haut-romain. 2. Supprimez complètement la balise avec la liste: aucun. 3. Utilisez la liste-image: URL ('Bullet.png') pour la remplacer par une image personnalisée. 4. Utilisez la position de style liste: dans

Comment créer un curseur de témoignage réactif avec CSS Comment créer un curseur de témoignage réactif avec CSS Aug 12, 2025 am 09:42 AM

Il est possible de créer un curseur de carrousel automatique réactif avec un CSS pur, il suffit de combiner la structure HTML, la disposition Flexbox et l'animation CSS. 2. Construisez d'abord un conteneur HTML sémantique contenant plusieurs termes de recommandation, chaque .Item contient du contenu de référence et des informations sur l'auteur. 3. Utilisez le conteneur parent pour définir l'affichage: flex, largeur: 300% (trois diapositives) et appliquez un débordement: caché pour obtenir une disposition horizontale. 4. Utilisez @KeyFrames pour définir une transformation Translatex de 0% à -100%, et combinez l'animation: Scroll15SLineArinfinite pour obtenir un défilement automatique sans faille. 5. Ajouter des médias

Comment créer un effet de verre en verre avec CSS Comment créer un effet de verre en verre avec CSS Aug 22, 2025 am 07:54 AM

Pour créer un effet de mimétisme en verre de CSS, vous devez utiliser le filtre de fond pour obtenir un flou d'arrière-plan, définir un arrière-plan translucide tel que RGBA (255,255,255,0.1), ajouter des bordures subtiles et des ombres pour améliorer le sens de la hiérarchie et vous assurer qu'il existe suffisamment de frontières et d'ombres pour améliorer le sens de la hiérarchie et garantir qu'il existe suffisamment de frontières visuelles derrière les éléments; 1. Utilisez le filtre de fond: Blur (10px) pour brouiller le contenu d'arrière-plan; 2. Utilisez RGBA ou HSLA pour définir le fond transparent pour contrôler le degré de transparence; 3. Ajouter 1PXSolidrgba (255 255,255,0,3) Borders et Box-Shadow pour améliorer la trois dimensionnalité; 4. Assurez-vous que le conteneur a des arrière-plans riches tels que des images ou des textures pour présenter un effet de pénétration floue; 5. Il est compatible avec les anciens navigateurs

Comment changer le curseur dans CSS Comment changer le curseur dans CSS Aug 16, 2025 am 05:00 AM

Usebuilt-incursortypeylinpointer, aide, ornot-allowedtoprovideImmediaTvisualfeedBackforDiFferenterActiveElements.2.ApplyCustomCursorImages withthecursorpropertyusingaul

Comment utiliser la grille-template-areas dans CSS Comment utiliser la grille-template-areas dans CSS Aug 22, 2025 am 07:56 AM

Thegrid-template-areaspropertyAllowsDevelowerStrocereIntuve, likellayoutsByDefiningNamedGridAreas; eorgostringrePresentsarowAndeachwordAcolumnCelll, withgrid-areamesonchildElementsMatterThoseIntheteemplate, tel "headerheader" for forwener "for forward" for for "for dhener" for for "for -Heder" for for "for-forwer" for for "for-forwer" for for "for dhener" pour

Comment ajouter une ombre de boîte dans CSS Comment ajouter une ombre de boîte dans CSS Aug 18, 2025 am 11:39 AM

Pour ajouter des ombres de boîte, utilisez l'attribut Box-Shadow; 1. La syntaxe de base est la boîte de box-shadow: Offset horizontal Offset Offset Blur Rayon Rayon d'extension Shadows en couleur; 2. Les trois premières valeurs sont requises, les autres sont facultatifs; 3. Utilisez rgba () ou hsla () pour atteindre un effet transparent; 4. Le rayon d'extension positif étend les ombres et la valeur négative est réduite; 5. Plusieurs ombres peuvent être ajoutées par séparation des virgules; 6. La surutilisation doit être évitée pour garantir que la visibilité est testée sur différents arrière-plans; Cet attribut est bien pris en charge par le navigateur, et une utilisation raisonnable peut améliorer la texture de conception.

See all articles