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

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

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

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

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

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

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

css 代码

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

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

图片的生成：

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

java 代码

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);
}

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

评论

4 楼 chpn 2007-05-24  

看来kde下面的那个自带浏览器用这种方法也应该得行。回去试试

3 楼 Tin 2007-05-23  

这个方式厉害呀，还真没见识过。

2 楼 jindw 2007-05-18  

orange200310 写道

YUI 里面有这样的实现,可以去参考^_^

以前的版本，就是常见的方式实现，没什么参考价值。新版本我倒没注意过。


另外，opera9也开始支持css3的opacity属性了。

1 楼 orange200310 2007-05-18  

YUI 里面有这样的实现,可以去参考^_^