参加 D2 2015 技术论坛感想

上周末去杭州阿里巴巴西溪园区参加了 2015 年的 D2 论坛,正好是第十届。

我听了一天的主会场,并在知乎上实时直播: 参加第十届D2前端技术论坛,你有什么收获? – yuanyuanVivian 的答案 。在这里谈谈自己的心得感想吧!

NodeJs 开始绽放

主会场的几场分享都还算挺不错。其中 NodeJS 相关的两场分享,一个是 Tmall 的线上经验,一个是 QZone 的线上经验,都是耳熟能详的大网站。我认为这代表 NodeJs 的线上能力已经得到了足够的验证,可以加快推广了继续阅读参加 D2 2015 技术论坛感想

怎样制作中间镂空的遮罩

SVG 版

最方便,兼容性最好的办法。方便镂空多个洞。代码来自 www.zhoumingzhi.com

镂空一个洞的代码


<div id="container" style="position: relative; margin: 550px 0 0 50px;">
<svg style="position: absolute;" width="400" height="280">
<defs>
<mask id="mask3">
<rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
<circle id="circle1" cx="100" cy="100" r="50" style="fill: #000" />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>
</svg>
<img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />
</div>

镂空多个洞的代码


<div id="container" style="position: relative;">
<svg style="position: absolute;" width="400" height="280">
<defs>
<mask id="mask3">
<rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
<circle id="circle1" cx="100" cy="50" r="50" style="fill: #000" />
<circle id="circle1" cx="300" cy="100" r="50" style="fill: #000" />
<circle id="circle1" cx="100" cy="200" r="50" style="fill: #000" />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>
</svg>
<img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />
</div>

Canvas 版

当镂空的形状比较复杂时,用 Canvas 的 globalCompositeOperation 是最终极的办法。当然 Canvas 也会有兼容性问题。

CSS clip 版

优点是所有浏览器都支持。缺点是更像是裁剪,只能遮罩特定的对象,而且只能镂空一个洞。

CSS 代码


#img1
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}

HTML 代码


<img border="0" id="img1" src="/i/eg_bookasp.gif" width="120" height="151">

-webkit-mask 版

有前缀,而且其作用就是相当于在上面盖了一个图片,鸡肋一样的属性。如果直接盖一个图片的话,可以兼容所有场景和所有浏览器。-webkit-mask 实例代码来自 http://webengine.sinaapp.com/jian/

{
-webkit-mask: url(http://webengine.sinaapp.com/jian/images/mask.png) no-repeat center -10px;
-webkit-mask-size: 500px 750px;
}

CSS3 版

用 box-shadow ,代码如下:

position: fixed;
left: 150px;
top: 35px;
width: 100px;
height: 100px;
border-radius: 100px;
box-shadow: rgba(0,0,0,.8) 0px 0px 0px 2005px;
z-index: 100;

缺点是只能镂空一个洞。

IE8 及以下的传统版

有点是兼容性最强,形式随意,可以镂空任意个洞。缺点是给人感觉这种工作很 low,而且事实上确实乏味、辛苦而又没有技术含量。
在镂空区域的左、上、右、下分别放一个半透明 div 作为遮罩。
div 背景用滤镜半透明, IE7+ 可以用 png8 半透明图片来代替。