我刚想出这个,它似乎适用于所有现代浏览器,我只是在(IE8/兼容性、Chrome、Safari、Moz)上对其进行了测试
HTML
<img id="my_image" alt="my text" src="images/small_transparent.gif" />
CSS
#my_image{
background-image:url('images/my_image.png');
width:100px;
height:100px;}
专业人士:
- 图像替代文本是可访问性/seo 的最佳实践
- 没有额外的 HTML 标记,而且 css 也非常小
- 解决 css on/images off 问题,其中“文本缩进”技术对低带宽用户隐藏文本
我能想到的最大缺点是 css off/images on 情况,因为你只会发送一个透明的 gif。
我想知道,谁使用没有样式表的图像?某种手机什么的?
我正在为澳大利亚偏远地区(距离最近的城市数百公里)的客户制作一些网站,那里的许多用户将遭受拨号连接的困扰,而且浏览器也经常过时,因此“图像关闭”问题是一个重要的考虑因素.
这种技术还有其他我没有考虑过的副作用吗?
编辑:只是想添加我将在普通图像标签上使用的额外信息,因为
A. 我可以使用 css-sprites
B. 我可以使用 php 生成 css,使用单个数组在不同子域之间交替背景图像源
C. 我喜欢现在调整图像大小不会拉伸或扭曲它的方式,因此它的行为就像页面上的其他所有内容一样。