PNG背景透明-滤镜使超链接失效的解决方法

作者:乔夫  分类: 网事悠游  日期:2010-11-20  1 条评论  

PNG背景透明的问题真的是个老掉牙的问题,可对于我这种从来不记代码的人,每每总会成为一个搜索控,哪怕就是检索自己的博客。这不这两天又遇到一个老问题,就是如果PNG图片是作为背景使用,那么IE6加上滤镜实现PNG背景透明后,背景之上的超链接却会全部失效,点无可点。原因,想也明白:就是默认滤镜的层级比伪类内容要高。解决的方法也很简单,比如用套用JS重新定义又或者对CSS做一些必要的修改。可我竟然费了老半天也没想起来其中的对错缘由,所以这次也得留下些许文字记录之,以备不时之需了。

简单的一个办法,给所有内容里的超链接加个相对属性。但是切忌加背景这个层不要再有定位,绝对也好相对也罢,必要的话可以在外面再套一层定位之,不然链接还是会被滤镜遮挡。

#a {
  position:absolute;
  top:*;
  left:*;
}
#b {
  background:url(*.png);
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png',sizingMethod='image');
}
#b a { position:relative; }
<div id="a">
<div id="b"><a href="#">*</a></div>
</div>

Read more »

再谈PNG背景透明

作者:乔夫  分类: 网事悠游  日期:2009-3-25  暂无评论,你来说两句呗?  

都说起老茧了,但一不注意还是会出问题。以往的透明都只是在样式表现的方法和方式上折中,说到底背景始终都是背景。这次突然想在页面中插入PNG图片并做链接时,才发现要做这个透明还真麻烦。试了N多种方法,但单纯用样式来解决各浏览器差异的话,效果是完全可以出来,但总有这样那样的问题,比如链接触发范围或者焦点,很是诡异。就像我遇到鼠标手移到实体图形上时链接正常,一移到透明背景区域就没了链接。乖乖个隆得咚,链接原来也可以做镂空效果的,哈哈……不过,最后搜索一番问题最终还是解决,就是加一段js代码做个判断,办法很简单,代码一眼就懂,所以就不做辍述了,有需要的朋友可以自己测试一下。
Read more »

小问题大学问超郁闷(PNG格式透明问题)

作者:乔夫  分类: 网事悠游  日期:2006-8-3  3 条评论  

最近做公司网站,代码写得差不多了,开始美化后台界面。因为是用 DIV+CSS 所以遇到了很多以往用表格打版所不曾遇到的小问题,却很是郁闷。

就像这个登陆页,因为版式有两分“异”,实在不知如何切片的好,因为这里的关键就是那个小水晶按钮。如果还按常规切的话,定义多个 DIV ,就没啥意义了,还不如直接用表格来得好。所以,想了想,把图片尽可能的优化后,做成了一个大背景,只把那按钮提出来。因为有一圈外发光,所以不能用 GIF,只好做成 PNG,于是问题就出来了: Read more »