Question

我有使用css处理图像翻转的脚本。如果这是进行CSS翻转的正确方法，我想知道什么？我还想知道这是否很好你如何处理其他翻转图像你是否必须为每个图像分别设置一个css？

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定义来减少损坏。

CSS图像翻转

3 个答案: