相关疑难解决方法(0)

使用CSS精灵进行图像处理时的典型经验法则是,您应该只对较小的图像(如图标)执行此操作,并且实际图像内容应始终通过<img>元素表示.我的问题是:为什么？对于内容图像,spriting的优势是否也值得？

我读过的一个原因是能够使用alt文本,在语法上更正确并且可以被屏幕阅读器访问.然而,当这是一个问题时,难道你不能轻易地使用一个小的透明图像与精灵上面的所有语法糖,呈现真正的视觉内容？

当我遇到大页面上的问题时,我正在使用透明背景覆盖的JavaScript对话框.

如果页面很大,透明覆盖层将是纯色(即不再透明).我做了一些测试,发现这只发生在覆盖层大于4096像素高(嗯,可疑,那是2 ^ 12).

有人可以验证这个问题吗？你见过一个解决方案吗？

这是我的测试代码(我正在使用Prototype):

<style>
.overlayA { 
    position:absolute;
    z-index:10;
    width:100%;
    height:4095px;
    top:0px;
    left:0px;
    zoom: 1;
    background-color:#000;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    opacity:0.1;
}

.overlayB { 
    position:absolute;
    z-index:10;
    width:100%;
    height:4097px;
    top:0px;
    left:0px;
    zoom: 1;
    background-color:#000;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    opacity:0.1;
}
</style>
<div style="width:550px;height:5000px;border:1px solid #808080">
    <a href="javascript:// show overlay A" onclick="Element.show('overlayA')">Display A = 4096h</a>
    <br /><a href="javascript:// show overlay B" onclick="Element.show('overlayB')">Display B = 4097h</a>
</div>
<div id="overlayA" onclick="Element.hide(this)" class="overlayA" style="display:none"></div>
<div id="overlayB" onclick="Element.hide(this)" class="overlayB" style="display:none"></div>