CSS遮罩mask

時間 2019-11-10

標籤 css mask 欄目 CSS 简体版

原文原文鏈接

本文轉載於:猿2048網站⇨CSS遮罩maskphp

前面的話

　　CSS遮罩是2008年4月由蘋果公司添加到webkit引擎中的。遮罩提供一種基於像素級別的，能夠控制元素透明度的能力，相似於png24位或png32位中的alpha透明通道的效果。本文將詳細介紹CSS遮罩mask

css

概述

　　遮罩mask的功能就是使用透明的圖片或漸變遮罩元素的背景。因而，遮罩mask與背景background很是相似，除了沒有color子屬性，背景background剩下的6個子屬性，mask都有html

　　遮罩mask是一個複合屬性，包括mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size、mask-composite這8個屬性android

　　[注意]IE瀏覽器不支持，webkit內核的瀏覽器(包括chrome、safari、IOS、android)須要添加-webkit-前綴。要特別注意的是，firefox瀏覽器也支持webkit-mask屬性web

【mask-image】chrome

　　默認值爲none，值爲透明圖片，或透明漸變瀏覽器

【mask-repeat】網站

　　默認值爲repeat，可選值與background-repeat相同，詳細狀況移步至此url

【mask-position】spa

　　默認值爲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，可選值爲alpha、luminance、match-source，或者它們的組合

【mask-composite】

　　默認值爲add，可選值爲add、subtract、intersect、exclude

　　[注意]只有firefox支持mask-mode和mask-composite

實例

<!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(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
    -webkit-mask:  url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) 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>
<div class="wrap">
    <div id="mask"></div>    
</div>
<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>

1. CSS遮罩mask
2. CSS mask漸變遮罩動畫
3. iOS 遮罩(mask)效果
4. uniGUI之MASK遮罩(22)
5. Unity UGUI——遮罩效果（Mask）
6. mask遮罩層詳解
7. mask layer的遮罩層
8. css 遮罩層
9. css——遮罩層
10. CSS遮罩層
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Docker容器實戰(七) - 容器眼光下的文件系統

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。