0

你好我对css sprite有一些误解。我想要一个像下面这样的按钮（悬停在绿色复选标记上。如果我将这两张图片组合成一个带有背景 url 和背景位置的精灵，它就像一个魅力。

链接到图片说明 抱歉没有足够的声誉来发布图片

但我的问题是按钮是由背景组成的

我在上面放了一个带有复选标记的精灵（假）

但没有办法做同样的事情，但有悬停状态（真正的复选标记）

我的 HTML

<div class="sprite sprite-novalid"> </div>
<input type="button" id="cancel" value="Cancel" name="button" onclick="" class="btn" title="Cancel [Alt+X]">

我的 CSS ：对于没有任何复选标记的背景按钮

.btn,input[type="button"],.btn{ 
background-color:#ECF1F4;
background-image:url(http://);
border-color:#ABC3D7;
color:#000000}

.btn, input{
border-radius:12px;
height: 31px;
width: 180px}

我的 css ：对于精灵

.sprite {
background: url(http://); 
no-repeat;}

我的 css ：用于错误的复选标记（灰色）

.sprite-novalid {
width: 19px;
height: 16px;
background-position: -31px 2px;
position: absolute;
display: inline-block;
bottom: 134px;
left: 21px;}

对于悬停 css，我什么也没放，因为错误太多

感谢大家的建议，或/并让我走上正轨。

最好的问候迪米特里

4

1 回答 1

0

我不太确定我是否理解您的问题，但是您可以 :hover 将您的精灵向上/向下移动..

.btn:hover{
width: 19px:
height: 16px;
background-position: ?px ?px;
/* some other styles you want*/
}

所以你所需要的只是一个包含所有相关图像的精灵（id 使整个按钮及其变体在一个精灵中），然后在需要时移动它们。然后你需要一个用于非活动按钮的 css 类，以及一个用于 :hover 的 css 类。这家伙解释得很好http://line25.com/tutorials/how-to-build-a-simple-button-with-css-image-sprites

我希望这会有所帮助 - 否则，在未来的问题中，小提琴演示会很好，如果在您看到我的答案时您的问题没有得到解决，请制作一个给我看:)

于 2014-03-17T13:30:33.493 回答