我有一个png grpahic,上面有几个图标。该项目的目标是可访问性,因此客户端希望使用img标签和alt属性,而不是使用带有地图图像和背景定位的div。我们正在使用设置img{max-width: 100%;}
的Twitter引导程序。此图像在具有50px乘50px尺寸的表格单元格内呈现。图像为329像素×100像素。这使得图像非常小,当然也显示了所有图标。我正在考虑使用CSS剪辑并提供类来显示我想要的图形。这里的正确方法是什么?我正在设置td { position: relative;}
和img { max-width: none; position: absolute; clip: rect(9px, 184px, 34px, 155px) }
这样做对我来说似乎很烦人。我可以使用更好的方法吗?我只是想利用屏幕阅读器功能的图像以及良好的HTML设计原则。我的css(LESS语法)看起来像这样
.tinytable img {
max-width: none;
background: red;
&.onetime {
position: absolute;
clip: rect(9px, 184px, 34px, 155px);
&:hover{
cursor: pointer;
}
}
}
我需要使用左和上等...来正确定位它。我发现使用背景图像和背景位置这一切都变得更加容易,但这似乎并不那么容易理解。我们也试图尽可能使用精灵。有没有办法根据背景大小和背景位置做我想做的事情。由于某些原因,剪辑对我来说似乎不可靠,不用太多提及我在Chrome或Firefox中调试时可以看到整个图像块容器。有人有任何想法吗?我确信这是一个相当普遍的问题。