兼容所有浏览器圆形头像的CSS

圆形头像的制作原理就是在头像上覆盖一张透明的图片,把四个角颜色设置成页面的背景颜色,中间透明。

这里需要注意的是需要把图片保存成24位的png,虽然IE6支持8位的png的透明,但是8位的png做透明圆弧图片存在效果上的问题,就是存在白色的杂边或锯齿。24位的png或32位的png的圆弧透明(半透明)图片则非常光滑,但是该死的IE6不支持24位的png或32位的png透明(其他浏览器都支持),需要我们额外的一下处理;使用 AlphaImageLoader就可以解决IE6不能显示24位和32位PNG的透明,
但使用 AlphaImageLoader 筛选器的元素必须有宽高,width:XXpx; height:XXpx;ie6下必须充值背景为none,_background:none

<style>

#test{position:relative; top:0; left:0;width:300px;height:300px;background:#000;}

#test span{position:absolute; top:0; left:0;width:200px;height:200px;background:url("路径/中间透明的图片.png");color:#fff;_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘路径/中间透明的图片.png
‘,sizingMethod=‘crop‘);}

</style>

<div id="test"><img src="图片地址" width="200" height="200" /><span></span></div>

时间: 2024-11-04 02:13:22

兼容所有浏览器圆形头像的CSS的相关文章

兼容各种浏览器的图片垂直居中CSS解决方案

1.通过添加一无语义图片来解决图片垂直居中CSS,兼容各种IE6,IE7,火狐,谷歌等浏览器. <style> .itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;} .blank{width:0;height:160px;} .itm img{vertical-align:middle;} </style> <div class="itm"> <img s

(转)兼容主流浏览器的CSS透明代码

透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } filter:alpha(opacity=50):这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器.-khtml-opacity: 0.5

CSS兼容各浏览器的hack

CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定版本书写CSS代码,这样就需要用到所谓的“CSS Hack”,下面以一段实例的形式介绍一下个浏览器hack. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

纯css兼容个浏览器input[type=&#39;radio&#39;]不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-siz

兼容IE6浏览器的最大高度和最小高度css代码

兼容IE6浏览器的最大高度和最小高度css代码:IE6浏览器是不支持最大高度和最小高度属性的,下面就通过兼容性措施实现此功能.一.最大高度效果: .max_height{ max-height:400px; _height:expression(this.scrollHeight > 400 ? "400px" : "auto"); } 二.最小高度效果: .min_height{ min-height:200px; _height:expression(th

CSS左侧固定宽 右侧自适应(兼容所有浏览器)

左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了: 左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么

CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码

CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码:固定悬浮在网页一侧的效果应用非常的频繁,尤其是客服系统或者公告系统,CSS提供了position:fixed属性即可实现此功能,但是IE6浏览器并不支持,虽然IE6的用户越来越少,但是毕竟还是有用户在使用,所以最好还是要实现兼容效果,下面就是一段能够兼容所有浏览器的代码实例,希望能够给需要的朋友带来帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu

在不同的浏览器使用不同的css样式,解决浏览器兼容问题

区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !important;       background:blue; 区别IE7与FF:       background:orange;        *background:green;       方法一:在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如: