CSS는 마스크 기능을 구현합니다.
- 巴扎黑원래의
- 2018-05-17 14:29:345335검색
이전 단어
CSS 마스크는 2008년 4월 Apple에 의해 웹킷 엔진에 추가되었습니다. 마스킹은 png24비트 또는 png32비트의 알파 투명도 채널 효과와 유사하게 픽셀 수준에서 요소의 투명도를 제어하는 기능을 제공합니다. 이번 글에서는 CSS 마스크를 자세히 소개하겠습니다
개요
이미지는 RGB의 3개 채널과 각 픽셀에 정의된 색상으로 구성되어 있습니다. 하지만 그 위에는 밝기를 통해 각 픽셀의 투명도를 정의하는 네 번째 채널인 알파 채널이 있습니다. 흰색은 불투명, 검은색은 투명, 그 사이에 있는 회색은 반투명을 의미합니다. 저작권은 작성자에게 있습니다.
마스크의 기능은 투명한 그림이나 그라데이션을 사용하여 요소의 배경을 가리는 것입니다. 따라서 마스크 마스크는 색상 하위 속성이 없다는 점과 배경 배경의 나머지 6개 하위 속성인 마스크를 제외하면 배경과 매우 유사합니다. image, 마스크 모드, 마스크-반복, 마스크 위치, 마스크 클립, 마스크 원본, 마스크 크기, 마스크 합성은 8가지 속성입니다
[참고] IE 브라우저는 웹킷 기반 브라우저(크롬 포함, Safari, IOS, android )에는 -webkit- 접두사를 추가해야 합니다. Firefox 브라우저는 webkit-mask 속성
【mask-image】
도 지원한다는 점에 유의하는 것이 중요합니다. 기본값은 없음, 값은 투명 이미지 또는 투명한 그라데이션
【mask-repeat】
입니다.기본값은peat, 선택값은 background-repeat와 동일, 자세한 내용은 여기
【mask-position】
기본값은 0 0, 선택값은 background-position과 동일, 자세한 내용은 여기
【mask-clip ]
기본값은 border-box, 선택값은 background-clip과 동일, 자세한 내용은 여기
【mask-origin】
기본값은 border-box, 옵션값은 background-origin, 세부사항과 같습니다 상황은 여기로 이동합니다
【mask-size】
기본값은 auto, 옵션값은 background-size와 동일, 세부사항 여기로 이동
【mask-mode】
기본값은 match-source, option 값은 alpha, luminance, match-source 또는 이들의 조합
【mask-composite】
기본값은 add, 선택적 값은 더하기, 빼기, 교차, 제외
[참고] 파이어폭스만 마스크 모드 및 마스크 복합
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>
을 지원합니다.
위 내용은 CSS는 마스크 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!