论坛首页 Web前端技术论坛

关于半透明遮罩的优化(关机效果)

浏览 7178 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-05-18  
最近在搞JSI 的重构,少来冒泡了。
发一个中午的刚用到的小技巧:

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

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

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

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

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


css 代码
  1. background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM4ffp0AwAHqALiYeNxSgAAAABJRU5ErkJggg==)


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


图片的生成:

图片的生成,浪费我一个中午的时间:(
开始本想找个软件做掉,最后没发现一个如意的,干脆,自己看看api,自己写了一下:
代码如下:
java 代码
  1. public static void main(String[] args) throws IOException {
  2. BufferedImage image = new BufferedImage(1, 1,
  3. BufferedImage.TYPE_INT_ARGB);
  4. Graphics2D g2d = image.createGraphics();
  5. // RGBA #cccccc80
  6. g2d.setColor(new Color(0xcc, 0xcc, 0xcc, 0x80));
  7. g2d.fillRect(0, 0, 1, 1);
  8. g2d.dispose();
  9. IIOImage iioImage = new IIOImage(image, null, null);
  10. ImageTypeSpecifier type = ImageTypeSpecifier
  11. .createFromRenderedImage(image);
  12. ImageWriter writer = (ImageWriter) ImageIO.getImageWriters(type, "png")
  13. .next();
  14. ByteArrayOutputStream out = new ByteArrayOutputStream();
  15. writer.setOutput(ImageIO.createImageOutputStream(out));
  16. writer.write(null, iioImage, null);
  17. BASE64Encoder encoder = new BASE64Encoder();
  18. String result = encoder.encode(out.toByteArray()).replaceAll("[\r\n]",
  19. "");
  20. System.out.println("data:image/png;base64," + result);
  21. }

需要其他颜色,自己修改一下代码即是。
   发表时间:2007-05-18  
YUI 里面有这样的实现,可以去参考^_^
0 请登录后投票
   发表时间:2007-05-18  
orange200310 写道
YUI 里面有这样的实现,可以去参考^_^


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


另外,opera9也开始支持css3的opacity属性了。
0 请登录后投票
   发表时间:2007-05-23  
这个方式厉害呀,还真没见识过。
0 请登录后投票
   发表时间:2007-05-24  
看来kde下面的那个自带浏览器用这种方法也应该得行。回去试试
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics