2

我有使用 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>

这可行，但只是想知道是否有一种特殊的方法来处理一个以上的翻转图像？

4

3 回答 3

4

您不必在 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>

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

于 2012-08-24T07:03:52.720 回答
2

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

CSS Sprites：图像切片的死亡之吻

于 2012-08-24T07:05:44.530 回答
1

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

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

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

于 2012-08-24T07:08:14.570 回答