compétences CSS : comment ajouter un masque à une image (partager)

Article précédent « Qu'est-ce que la syntaxe CSS ? Introduction détaillée aux méthodes et règles d'utilisation 》Introduction aux méthodes d'utilisation et aux règles de la syntaxe CSS. L'article suivant partagera avec vous quelques astuces sur l'utilisation de CSS pour ajouter des effets de masque aux images. Cette astuce est très pratique et peut vous aider à briser le schéma de mise en page d'un site Web. Elle ne nécessite que quelques lignes de code.

Ajouter des masques

Les masques indiquent à votre navigateur quels éléments d'actifs doivent être visibles, ce qui est idéal pour créer des formes et des mises en page créatives. Le masquage peut être effectué de trois manières en utilisant des images raster (comme le format PNG avec des parties transparentes), des dégradés CSS ou des éléments SVG.

Notez que contrairement aux images raster classiques, le SVG peut être mis à l'échelle ou converti sans perte significative de qualité.

Code ci-joint :

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

Il convient de mentionner que Firefox ne prend en charge que la dernière version, nous devons donc utiliser des éléments de masque SVG en ligne. Que se passe-t-il si nous utilisons une image raster avec des niveaux de transparence ? Les parties transparentes de l’image ne seront pas visibles – en d’autres termes, des segments opaques seront affichés, cachant d’autres parties. Le masquage est particulièrement puissant car il permet d'appliquer les mêmes propriétés aux images d'arrière-plan, en définissant leur position, leur taille et leur répétition.

Pré-traitement :

Post-traitement :

Vous pouvez utiliser les niveaux de transparence pour découper des parties d'images animées (comme les fichiers GIF), lorsque vous utilisez ces propriétés, n'oubliez pas de croiser prise en charge du navigateur et ajout du préfixe d'entreprise de provisionnement.

Apprentissage recommandé : Tutoriel vidéo CSS

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!