CSS图像翻转

Question

我有脚本处理图像翻转与CSS。我想知道如果这是做CSS翻转的正确方法？我也想知道这是否好，你如何处理其他翻转图像，你必须为每个图像有一个单独的CSS？

下面是一个例子：http://jsfiddle.net/GFec3/40/

CSS代码：

a.rollover { 
    display: block; 
    width: 27px; 
    height: 25px; 
    text-decoration: none; 
    background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg"); 
} 

a.rollover:hover { 
    background-position: -350px 0; 
} 

.displace { 
    position: absolute; 
    left: -5000px; 
} 

HTML

<a href="#" class="rollover" title="Webvamp" width="54" height="25"><span class="displace">TEST</span></a> 

这工作，但只是想知道有没有处理一种特殊的方式更多然后一个翻转图像？

Answer 1

您不必在css中使用背景图像。例如：

<STYLE type="text/css"> 
.roll .on { display: none; } 
.roll .off { display: block; } 
.roll:hover .on { display: block; } 
.roll:hover .off { display: none; } 
</STYLE> 
<DIV class="roll"> 
    <IMG class="on" src="..."> 
    <IMG class="off" src="..."> 
</DIV> 

有很多方法可以做到这一点。选择哪个取决于你。

Answer 2

使用CSS sprite，有了这个，你只需要使用一张背景图片，你只需要改变背景的位置不同的图像悬停

CSS Sprites: Image Slicing’s Kiss of Death

Answer 3

您目前是最有效的方法。除此之外，它“预加载”了翻转图像，因为它与非翻转图像相同，只是它的不同部分。它还将HTTP请求的数量减少到最低限度（在data方案中），并且在某些情况下实际上改善了文件大小（最好的情况是使用类似调色板的两个图像，而不是两个需要一个色表）。

不要改变它，它是完美的。

您必须为每次翻转定义一个单独的CSS，但是如果图像尺寸相同，则可以通过重新使用:hover定义来减少损坏。