Exemples pour expliquer l'utilisation spécifique du masque CSS3-tutoriel CSS-php.cn

Exemples pour expliquer l'utilisation spécifique du masque CSS3

小云云

Libérer： 2017-12-23 13:15:46

original

2608 Les gens l'ont consulté

L'attribut masque de CSS permet aux utilisateurs de masquer partiellement ou complètement la zone visible d'un élément. Cet effet peut être obtenu en masquant ou en recadrant des zones spécifiques de l'image. Cet article présente principalement l'utilisation spécifique du masque CSS3.Il présente en détail l'utilisation spécifique du masque CSS3.Il a une certaine valeur de référence.J'espère que cela pourra aider tout le monde.

L'abréviation de mask définira mask-border à sa valeur initiale. Utilisez l'abréviation de masque par rapport à d'autres abréviations ou remplacez les paramètres des propriétés respectives. Cela garantit que la bordure du masque sera également réinitialisée avec le nouveau style d'effet.

mask-image

mask-image masque l'élément html en lisant la transparence. Le noir représente le transparent, le blanc représente l'opaque et le gris représente le translucide. S'applique à tous les éléments, en SVG il agit sur le conteneur contenant l'élément

/* 图片资源 */
-webkit-mask-image: url(mask.png);

/* css的渐变属性 */
 -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); 

/* image属性 ~ ??? */
-webkit-mask-image: image(url(mask.png), skyblue);
/* 混合属性 */
-webkit-mask-image: url(&#39;http://d.lanrentuku.com/down/png/1410/bw_halloween/bat-3-256.png&#39;), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

Copier après la connexion

masque-répétition

/* 单个值 */
-webkit-mask-repeat: no-repeat | repeat-x | repeat-y | space | round | repeat(默认值);
/* 两个值 horizontal(水平)  vertical(垂直) （以下仅为示例）*/
-webkit-mask-repeat: repeat space | repeat repeat | round space | no-repeat round;

/* Multiple values */
-webkit-mask-repeat: space round, no-repeat;
-webkit-mask-repeat: round repeat, space, repeat-x;

/* 多层遮罩  (。・_・)/~~~*/
mask-image: url(&#39;mask1.png&#39;), url(&#39;mask2.png&#39;);
mask-repeat: repeat-x, repeat-y;

Copier après la connexion

masque- clip

-webkit-mask-clip: content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box | no-clip;

-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/* Multiple values */
-webkit-mask-clip: padding-box, no-clip;
-webkit-mask-clip: view-box, fill-box, border-box;

Copier après la connexion

masque-origine

/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Non-standard keyword values */ 
-webkit-mask-origin: content; 
-webkit-mask-origin: padding; 
-webkit-mask-origin: border;

Copier après la connexion

taille-masque

.pTest{
    padding: 40px;
    background-color: #03ff36;
    background-image: url(http://cdn01.baidu-img.cn/timg?image_search&quality=80&size=b10000_10000&sec=1470644878&di=f054ab9449175833cf84b3429acacd88&imgtype=jpg&src=http%3A%2F%2Fimg0.bdstatic.com%2Fimg%2Fimage%2Fshouye%2Fxiaoxiao%2Fis099s8ky-PC.jpg));
    -webkit-mask-image: url(http://image27.360doc.com/DownloadImg/2011/04/2015/11077777_58.png)), url(http://img.t.sinajs.cn/t6/style/images/global_nav/WB_logo.png));
    -webkit-mask-repeat: space,repeat-y;
    -webkit-mask-clip: text; 
    -webkit-mask-size: 5%, 8%;
    border: 30px solid red;
}

Copier après la connexion

masque-composite (ni support ಥ _ಥ )

mask-composite: add | subtract | intersect | exclude;

Copier après la connexion

Recommandations associées :

10 articles recommandés sur la fonction php umask()

Utiliser les outils de masque CSS Épissage par barre oblique des images_html/css_WEB-ITnose

Page jQuery Implémentation du masque code_jquery

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!