4.10 (案例) 蒙版

作者: 柒月柒日晴7 | 来源:发表于2017-06-08 00:21 被阅读0次

4.10 (案例) 蒙版
SAI界面基础操作-蒙版
2018-09-28
轨道蒙版
零基础学习PhotoshopCS6︱第十课图层蒙版
PS中的蒙版有哪些用途？
基础-16、lvm
HTML开发完美解决pop弹出蒙版后底层滑动问题
ps蒙版如何使用详细步骤手把手教你Photoshop蒙版的使用
图层蒙版的使用-058

蒙版.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
蒙板
语法：
-webkit-mask-image:url | gradient 
/*可以使用图片或渐变作为遮罩层*/
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
-webkit-mask-position:x y;

-webkit-mask-clip:border | padding | content
-webkit-mask-origin:border | padding | content 
    <style type="text/css">
        .box1 img{
            /*-webkit-mask:url(images/mengban.png) repeat 0 50px;*/
            
            /*表示蒙板的图片*/
            -webkit-mask-image:url(images/mengban.png);
/*            表示平铺方式  有repeat repeat-x repeat-y no-repeat;
            -webkit-mask-repeat:repeat;
            -webkit-mask-repeat:no-repeat;
            表示蒙板在容器位置:类似参考 background-position;
            -webkit-mask-position: 0 50px;
            裁剪方式   有 border  padding  content 
                    表示在border裁剪 
                    表示在padding裁剪
                    表示在content裁剪
            */

            -webkit-mask-clip: content;
            border:30px red solid;
            padding: 30px;
            
        }
        .box2 img{
            /*-webkit-mask-image:url(images/01.png) ;
            /*url*/
            -webkit-mask-image:-webkit-radial-gradient(50% 50%,
            rgba(255,255,255,1)  20%,
            rgba(100,100,100,0) 50%);
            /*渐变*/
        }
        
        
        .box5{
            width:500px;
            height:200px;
            margin-top:200px;
            overflow: hidden;
            line-height: 20px;
            background: -webkit-radial-gradient(50% 50% ,#FFCCCC 25%, #CCCC00 50%,#9966CC 75%,#CC3399 100%);
            -webkit-background-clip: text;
            color:transparent;
        }
    </style>
    <div class="box1">
        ![](images/3.jpg)
    </div>
    <div class="box2">
        ![](images/3.jpg)
    </div>
    
    <div class="box5">
        渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈渐变效果哈哈哈哈
    </div>
    </div>
    </body>
</html>