您的位置：首页 > 其它

部分全透明遮罩层

2016-03-13 22:18 274 查看
腾讯微云，在新用户刚进入网站时的提示。
第一眼看到这样的部分全透明遮罩的效果，感觉实现的方式有：

1.使用图片，在相应的位置进行挖空全透明处理。但是这样如果有多处提示，就得使用多张图片

2.或者像腾讯微云自己的实现方式，垒积木似的一块一块拼接，这样做缺点也很明显






在看到一篇博客上的思路，如果把白色区域看成div，黑色半透明部分看成div的各个border，这样事情就变得简单得多：

代码实现

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>背景遮罩</title>
<style>
.cover{
display:block;
position:absolute;
left:0;top:0;right:0;bottom:0;
border:0solid#000;
opacity:.75;
filter:alpha(opacity=75);
z-index:9;
/*边缘闪动问题fix*/
box-shadow:000100px#000;
overflow:hidden;
width:167px;
height:39px;
border-width:20px1065px2277px48px;
display:block;
}
.cover::before{
content:'';
width:100%;
height:100%;
border-radius:50%;
border:400pxsolid#000;
position:absolute;
left:-400px;top:-400px;
box-shadow:inset005px2pxrgba(0,0,0,.75);
}
</style>
</head>
<body>
<h3>这是一个背景遮罩</h3>
<divclass="cover"id="cover"></div>
</body>
</html>


　　实现效果：



（这样我们只需要改变四面border的值，就能够改变border的位置，改变div的width或者height就可以改变白色区域的形状。但是这样的缺点是只能形成有限的全透明形状）
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航