关于网页上半透明遮罩的优化（关机效果）

关于网页上半透明遮罩的优化（关机效果）

最近在搞JSI 的重构，少来冒泡了。
发一个中午的刚用到的小技巧：

在关机效果实现上，现在一般根据浏览器特征分别使用 虑镜/样式/图片 去模拟。

其中Opera是不支持网页透明的，只能用png的alpha透明模拟。
所以，我们需要一张特别的小图片。一个象素，alpha透明。

但是这个单象素图片的出现，感觉有点怪怪的，而且当网速很慢的时候，装载这个小图片还会延迟，效果不好。

不过，Opera的另外一个特性，可以避免这个问题：data:协议的支持。

对于这种小图片，完全可以编码到样式里面

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM4ffp0AwAHqALiYeNxSgAAAABJRU5ErkJggg==)

好了，如此一来，关机效果的实现，就没有图片这个累赘了。

图片的生成：

图片的生成，浪费我一个中午的时间：（
开始本想找个软件做掉，最后没发现一个如意的，干脆，自己看看api，自己写了一下：
代码如下：

     public   static   void  main(String[] args)  throws  IOException {
        BufferedImage image  =   new  BufferedImage( 1 ,  1 ,
                BufferedImage.TYPE_INT_ARGB);
        Graphics2D g2d  =  image.createGraphics();
         //  RGBA #cccccc80
        g2d.setColor( new  Color( 0xcc ,  0xcc ,  0xcc ,  0x80 ));
        g2d.fillRect( 0 ,  0 ,  1 ,  1 );
        g2d.dispose();
        IIOImage iioImage  =   new  IIOImage(image,  null ,  null );
        ImageTypeSpecifier type  =  ImageTypeSpecifier
                .createFromRenderedImage(image);
        ImageWriter writer  =  (ImageWriter) ImageIO.getImageWriters(type,  " png " )
                .next();
        ByteArrayOutputStream out  =   new  ByteArrayOutputStream();
        writer.setOutput(ImageIO.createImageOutputStream(out));
        writer.write( null , iioImage,  null );
        BASE64Encoder encoder  =   new  BASE64Encoder();
        String result  =  encoder.encode(out.toByteArray()).replaceAll( " [\r\n] " ,
                 "" );
        System.out.println( " data:image/png;base64, "   +  result);
    }

需要其他颜色，自己修改一下代码即是。