CSS implémente la fonction de masque-tutoriel HTML-php.cn

CSS implémente la fonction de masque

巴扎黑

Libérer： 2018-05-17 14:29:34

original

5354 Les gens l'ont consulté

Mots précédents

Les masques CSS ont été ajoutés au moteur du webkit par Apple en avril 2008. Le masquage offre la possibilité de contrôler la transparence d'un élément au niveau du pixel, similaire à l'effet du canal de transparence alpha en png24 bits ou png32 bits. Cet article présentera en détail le masque CSS

Aperçu

L'image est composée de trois canaux de RVB et de la couleur définie sur chaque pixel. Mais au dessus d'eux se trouve un quatrième canal, le canal alpha, qui définit la transparence sur chaque pixel via la luminosité. Le blanc signifie opaque, le noir signifie transparent et le gris intermédiaire signifie translucide. Le droit d'auteur appartient à l'auteur.

La fonction du masque est d'utiliser une image transparente ou un dégradé pour masquer l'arrière-plan de l'élément. Par conséquent, le masque de masque est très similaire à l'arrière-plan, sauf qu'il n'y a pas de sous-attribut de couleur et que les 6 sous-attributs restants de l'arrière-plan, le masque ont tous

. Le masque de masque est un attribut composite, y compris le masque-. image, masque - Les huit attributs mode, masque-répétition, masque-position, masque-clip, masque-origine, masque-taille et masque-composite

[Remarque] Le navigateur IE ne le prend pas en charge, et navigateurs avec noyau webkit (y compris Chrome, Safari, IOS, Android), vous devez ajouter le préfixe -webkit-. Il est important de noter que le navigateur Firefox prend également en charge l'attribut webkit-mask

[mask-image]

La valeur par défaut est none, la valeur est une image transparente, ou un dégradé transparent

【mask-repeat】

La valeur par défaut est répéter, les valeurs facultatives sont les mêmes que background-repeat, les détails sont ici

【mask-position 】

La valeur par défaut est 0 0, la valeur facultative est la même que background-position, les détails sont ici

[mask-clip]

La valeur par défaut est border -box, la valeur facultative est la même que background-clip , les détails vont ici

[mask-origin]

La valeur par défaut est border-box, la valeur facultative est la même que background-origin, les détails vont ici

【mask-size】

La valeur par défaut est auto, la valeur facultative est la même que background-size, les détails sont ici

【mask-mode】

La valeur par défaut est match-source, les valeurs facultatives sont alpha, luminance, match-source ou leur combinaison

[mask-composite]

La valeur par défaut est ajouter, les valeurs facultatives sont ajouter, soustraire, croiser, exclure

[Note] Seul Firefox prend en charge le mode masque et le masque-composite

instance

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.wrap{position:absolute;width: 400px;border:1px solid black;}#mask{height: 300px;background:url() lightblue;-webkit-mask:  url() no-repeat;animation: 2s maskPosition infinite alternate ;}#mask:hover{animation: none;}@keyframes maskPosition{0%{-webkit-mask-position:0 0;}100%{-webkit-mask-position:100% 100%;}}</style></head><body><p class="wrap"><p id="mask"></p>    </p><script>var oBox = document.getElementById('mask');
oBox.onmousemove = function(e){
    e = e || event;
    oBox.style.WebkitMaskPosition=(e.clientX-50)+"px "+ (e.clientY-50)+"px";
}    
</script></body></html>

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!