0

我目前的代码是：

CSS：

.submitorder {
background-image: url('https://www.amleo.com/images/art/PON1.jpg');
width: 205px;
height: 52px;
font-size:0px;
}

.submitorder:hover {
background-image: url('https://www.amleo.com/images/art/PON2.jpg');
width: 205px;
height: 52px;
font-size:0px;
}

HTML 很简单：

<div><input type="submit" class="submitorder"/></div>

我的页面位于： https ://www.amleo.com/checkout.aspx

我应该将图像组合成一张图像吗？我如何将用户看到的内容移动到悬停时图像的下半部分？

只是想了解什么是好/坏/丑。:)

谢谢你。

4

2 回答 2

1

看看 css 精灵：http ://css-tricks.com/css-sprites/

你应该创建这样的东西：

你的精灵>

（通过csssprites.com/完成）

然后使用：

.submitorder {
background-image: url('sprite.jpg');
background-position: 0px 0px;
width: 205px;
height: 52px;
font-size:0px;
}

.submitorder:hover {
background-position: 0px -62px;
}
于 2013-01-08T16:21:09.720 回答
0

你可能想要这样的东西。

http://css-tricks.com/css-sprites/

于 2013-01-08T16:19:08.940 回答