css 图片 局部 清晰(圆形 需要支持css3)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><script type="text/javascript">function mouseOverHandler(evt) {var thumb = document.getElementById("thumb");var clearimg = document.getElementById("clearimg");var thumbWidth = thumb.clientWidth;var thumbHeight = thumb.clientHeight;//var abc = getStyle(thumb, "width");thumb.style.left = (evt.clientX - thumbWidth / 2) + "px";thumb.style.top = (evt.clientY - thumbHeight / 2) + "px";thumb.style.positionX = thumb.style.left;thumb.style.positionY = thumb.style.top;//thumb.style.clip = buildClip(evt.clientX ? evt.clientX : evt.x,//evt.clientY ? evt.clientY : evt.y, thumbWidth, thumbHeight);}function getStyle(elem, name) {//如果该属性存在于style[]中，则它最近被设置过(且就是当前的) if (elem.style[name]) {return elem.style[name];}//否则，尝试IE的方式 else if (elem.currentStyle) {return elem.currentStyle[name];}//或者W3C的方法，如果存在的话 else if (document.defaultView && document.defaultView.getComputedStyle) {//它使用传统的"text-Align"风格的规则书写方式，而不是"textAlign" name = name.replace(/([A-Z])/g, "-$1");name = name.toLowerCase();//获取style对象并取得属性的值(如果存在的话) var s = document.defaultView.getComputedStyle(elem, "");return s && s.getPropertyValue(name);//否则，就是在使用其它的浏览器 } else {return null;}}var clipWidth = 200;var clipHeight = 200;function buildClip(x, y, width, height) {var rect = "rect(" + (y - clipHeight / 2 + "px,")+ ((x + clipWidth - clipWidth / 2) + "px,")+ ((y + clipHeight - clipHeight / 2) + "px,")+ (x - clipWidth / 2 + "px") + ")";return rect;}</script><style type="text/css">* {margin: 0px;padding: 0px;}#thumb {position: absolute;width: 200px;height: 200px;background-image: url('Hydrangeas.jpg');background-repeat: no-repeat;background-attachment: fixed;/* Do rounding (native in Safari, Firefox and Chrome) */-webkit-border-radius: 200px;-moz-border-radius: 200px;}#main {width: 600px;height:400px;position: absolute;background: url('Hydrangeas.jpg') no-repeat;/* Firefox, Safari(WebKit), Opera */filter: alpha(opacity = 20);background: url('Hydrangeas.jpg') no-repeat;opacity: 0.2;/* Firefox, Safari(WebKit), Opera */filter: alpha(opacity = 20);background: url('Hydrangeas.jpg') no-repeat;opacity: 0.2; /* Firefox, Safari(WebKit), Opera */filter: alpha(opacity = 50);/* IE 4-7 */}</style></head><body><div id="main" onmousemove="mouseOverHandler(event);"></div><div id="thumb" onmousemove="mouseOverHandler(event);"></div></body></html>