CSS3 마스크의 구체적인 사용을 설명하는 예

CSS의 마스크 속성을 사용하면 사용자가 요소의 표시 영역을 부분적으로 또는 완전히 숨길 수 있습니다. 이 효과는 이미지의 특정 영역을 마스킹하거나 자르면 얻을 수 있습니다. 이 글은 주로 CSS3 마스크의 구체적인 사용법을 소개합니다. 관심이 있으신 분은 이 글이 모든 사람에게 도움이 되기를 바랍니다.

mask 약어는 마스크 테두리를 초기값으로 설정합니다. 다른 약어보다 마스크라는 약어를 사용하거나 해당 속성의 설정을 재정의합니다. 이렇게 하면 마스크 테두리도 새 효과 스타일로 재설정됩니다.

mask-image

mask-image는 투명도를 읽어 HTML 요소를 마스크합니다. 검정색은 투명을 나타내고 흰색은 불투명을 나타내고 회색은 반투명을 나타냅니다. 모든 요소에 적용되며, SVG에서는 요소와 모든 그래픽 요소가 포함된 컨테이너에서 작동합니다. ㅋㅋㅋ

/* 图片资源 */
-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);

마스크 크기

/* 单个值 */
-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;

mask-composite (ಥ _ ​​ಥ도 지원하지 않음)

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

관련 권장 사항:

PHP umask() 함수에 대한 10개 기사 권장

CSS 마스크를 사용하여 슬래시 접합 달성 이미지 _html/css_WEB-ITnose

jQuery 페이지 마스크 구현 code_jquery

위 내용은 CSS3 마스크의 구체적인 사용을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!