注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

CSS3阶段汇总1 基本功能——遮罩蒙版效果、渐变  

2014-04-02 21:09:04|  分类: CSS3属性 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
遮罩蒙版效果如图:

要实现遮罩蒙版效果需要两张图

     这是原图1                  这是原图2                            效果图如下:

CSS3阶段汇总1 基本功能——遮罩蒙版效果、渐变 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手        CSS3阶段汇总1 基本功能——遮罩蒙版效果、渐变 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手                 CSS3阶段汇总1 基本功能——遮罩蒙版效果、渐变 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手

mask属性:目前只支持webkit核心的浏览器

-webkit-mask-image:url|gradient(渐变效果);

-webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;

-webkit-mask-position:x y;(蒙版的起始位置)

-webkit-mask-clip:border|padding|content;(简单的说就是蒙版的裁剪位置)

-webkit-mask-origin:border|padding|content;(简单的说就是蒙版的原点位置)

代码如下

<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<title>遮罩蒙版</title>
<style type='text/css'>
.con {
height: 500px;
background: url('01.jpg');
-webkit-mask: url('text.png') 50% 50% no-repeat;/*需要添加浏览器内核前缀,不含浏览器的内核的写底部,冒号对齐;*/
-moz-mask: url('text.png') 50% 50% no-repeat;
-ms-mask: url('text.png') 50% 50% no-repeat;
-o-mask: url('text.png') 50% 50% no-repeat;
mask: url('text.png') 50% 50% no-repeat;
}
</style>
</head>

<body>
<div class='wrap'>
<div class='con'></div>
</div>
</body>
</html>


从上面我们可以得出什么结论?

为什么会显示出多边形呢,看如下图

CSS3阶段汇总1 基本功能——遮罩蒙版效果、渐变 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手


结论:形状觉得蒙板的样式,颜色对图像没有任何影响,不透明的部分为显示区域,透明部分为隐藏区域,半透明区域半透明显示(这一个就不再这里提了)。

渐变效果如下:

CSS3阶段汇总1 基本功能——遮罩蒙版效果、渐变 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手
CSS更改蒙版的渐变的代码如下

<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<title> 蒙板渐变模式</title>
<style type='text/css'>
.con {
height: 500px;
width: 500px;
-webkit-mask-image: -webkit-radial-gradient(50% 50%,rgba(255,204,0,0),rgba(0,0,0,1));
}
.con img {
width: 400px;
height: 400px;
}
</style>

</head>

<body>
<div class='wrap'>
<div class='con'>
<img src='01.jpg'>
</div>
</div>
</body>
</html>

但是蒙板是能够应用渐变,但是因为浏览器的兼容问题比较严重,通常不使用渐变作为蒙板的属性值,而是使用“透明梯度”的图片替代渐变,产生同样的功能。

 



    
  评论这张
 
阅读(261)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017