Heim > Web-Frontend > CSS-Tutorial > Beispiele zur Erläuterung der spezifischen Verwendung der CSS3-Maske

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

小云云
Freigeben: 2017-12-23 13:15:46
Original
2610 Leute haben es durchsucht

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);
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

Maskenverbund (weder unterstützt ಥ _ ಥ )


mask-composite: add | subtract | intersect | exclude;
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage