CSS RollOver图像通过Background-position-x带封面/包含?

时间:2014-02-04 05:54:21

标签: html css

当您提供的图像尺寸是所需实际像素尺寸的两倍时,iPhone设备看起来效果最佳。当你使用包含它时,它将使图像看起来清晰和漂亮。

我为具有2个状态的控件制作了背景图像。在&关闭。为了提高效率而不是制作两个单独的图像,我创建了一个文件,我只需更改background-position-x属性,当我单击控件来更改图像时。

这是有效的,除了...包含将显示整个背景图像'on&关闭'州。

现在我正在使用2个不同的图像来控制更改图像。

有没有办法'包含'图像,但只有一部分源图像文件像素?这样我可以让它看起来不错但是使用1个文件而不是2个文件?

或者这对效率有影响吗?

1 个答案:

答案 0 :(得分:0)

对于背景图像精灵(这就是你在一个文件中称为多个图像片段)我更喜欢使用像它们这样的元素,并对它们进行定位和调整大小,这样它们就是我想要显示的精灵片段的确切大小。

所以,假设你有一个需要悬停效果或任何可能需要图像进行交换的东西。最简单的方法是在图像内添加一个基本的html:

<a href="#><span></span></a>

然后你调整并添加位置:relative;

然后在你的跨度上设置高度和宽度为100%并添加位置:绝对;顶部:0;左:0;并将背景图像应用于范围。

然后你可以做一样的事情:hover span {background:0 10px;等等。