今天小编跟大家讲解下有关CSS 新的图像替换方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 新的图像替换方法 的相关资料，希望小伙伴们看了有所帮助。
参看 Dave Shea’s excellent summary Paul Young 在分析现存的所有方法的优缺点之后 提出了一种新的方法 并将其命名为“状态域方法”（The State Method） 本文将详细介绍该方法的原理：现存方法的缺点：
容易失效 例如：图像禁用或者替换图像含有透明区域； 过于复杂不能迅速可靠的执行； 通过js遍历文档树 在页面加载时出现的闪动不尽人意； 可能与一些浏览器不兼容新的图像替换方法：
新的图像替换技术需要借助于js来实现 但很容易执行 只需要将一小段js引入到头部即可。一旦js执行 响应的规则前将附加“.image-on” 只要客户端的图片未被禁用 规则就会生效 下面是一条应用到h1“状态域方法”的声明：
h1 { width: 100px; height: 50px; }
@media screen { .images-on h1 { text-indent: -10000px; background-image: url(image.png); overflow: hidden; } }
第一条规则总是生效 第二条只有在image未被禁用时生效。“text-indent”使文字偏移于屏幕之外 “overflow:hidden”主要用来在FF下放置锚点在被点击时其焦点偏移于屏幕之外。
[email protected] screen中 主要用来保证图像替换只发生在屏幕阅读器中 而不是在打印状态下执行。如果不这样处理 页面打印时 多数用户将看到一个很大的空隙而不是有意义的文本。
该项技术执行起来很快。因为文本偏移于屏幕之外 图像可以包含透明元素 透过图像本身 你看不到任何文本。Js执行很快 几乎是瞬时的 它充分利用浏览器本身的特性。方法解析
“状态域方法”是在一种假定的状态下 快速使css规则生效的方法 其上下文背景为document 这样避免了浏览器遍历DOM树。应用“状态域方法”有两个理由：
针对用户的反应 页面部分内容再格式化； 基于客户端浏览器、设备、和其它状况而附加额外的样式。“状态域方法”通过使用下面的script给html附加一个class。
document.enableStateScope = function(scope, on) { var de = document.documentElement; if (on) de.className += " " + scope; else de.className = de.className.replace( new RegExp("\\b" + scope + "\\b"), ""); };
这段js有一点小问题 在示例页中切换功能并不生效 我重新修改了一下 代码如下：
function hasClass(ele,cls) {return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));}function addClass(ele,cls) {if (!this.hasClass(ele,cls)) ele.className += " "+cls;}function removeClass(ele,cls) {if (hasClass(ele,cls)) {var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');ele.className=ele.className.replace(reg,' ');}}document.enableStateScope = function(scope, on) {var de = document.documentElement; On ?addClass(de,scope) : removeClass(de,scope);};
上面的hasClass、addClass、removeClass方法借用的是《Pro Javascript Techniques》提供的方法。如果你使用过jquery 方法将更简单。
“状态域”可以通过下面的方法来切换：
if (condition == true) {document.enableStateScope("myScope", true); }
如果“状态域”为“on” 状态域的名字将附加到规则的选择器之前 下面这条规则在条件为真时会将锚点的颜色变成blue。
a { color: red; } .myScope a { color: blue; }
正如你所预想的那样 状态域图像替代技术是通过检查图像是否被禁用而工作的。如果未被禁用 将激活“image-on”状态域 这很直接了当。上一页12 下一页 阅读全文
来源：爱蒂网
