Beispiele zur Erläuterung der spezifischen Verwendung der CSS3-Maske

Das Maskenattribut von CSS ermöglicht es Benutzern, den sichtbaren Bereich eines Elements teilweise oder vollständig auszublenden. Dieser Effekt kann durch Maskieren oder Zuschneiden bestimmter Bildbereiche erzielt werden. Dieser Artikel stellt hauptsächlich die spezifische Verwendung der CSS3-Maske vor. Wenn Sie interessiert sind, kann er Ihnen helfen.

Die Abkürzung mask setzt mask-border auf seinen Anfangswert. Verwenden Sie die Abkürzung „Maske“ gegenüber anderen Abkürzungen oder überschreiben Sie die Einstellungen der jeweiligen Eigenschaften. Dadurch wird sichergestellt, dass auch der Maskenrand auf den neuen Effektstil zurückgesetzt wird.

mask-image

mask-image maskiert das HTML-Element durch Auslesen der Transparenz. Schwarz steht für transparent, Weiß steht für undurchsichtig und Grau steht für durchscheinend. Gilt für alle Elemente, in SVG wirkt es auf den Container, der das -Element und alle grafischen Elemente enthält.

/* 图片资源 */
-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('http://d.lanrentuku.com/down/png/1410/bw_halloween/bat-3-256.png'), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

Maskenwiederholung

/* 单个值 */
-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('mask1.png'), url('mask2.png');
mask-repeat: repeat-x, repeat-y;

Masken- 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;

mask-origin

/* 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;

Maskengröße

.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;
}

Maskenverbund (weder unterstützt ಥ _ ಥ )

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

Verwandte Empfehlungen:

10 empfohlene Artikel zur PHP-Funktion umask()

CSS-Maske verwenden implementiert Slash-Splicing von Bildern_html/css_WEB-ITnose

jQuery-Seite Maskenimplementierung code_jquery

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung der spezifischen Verwendung der CSS3-Maske. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!