Question

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

link to the picture explanation 抱歉没有足够的声誉来发布图片

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

我给它添加了一个带有复选标记（假）的精灵

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

我的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，我没有放任何东西，因为这么多错误

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

祝你好运迪米特里

Answer 1

我不太确定我是否向你提出问题，但是你可以做出：将你的精灵向上/向下移动..

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

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

我希望这会有所帮助 - 否则一个小提琴演示会在未来的问题中很好，如果你的问题在你看到我的答案时没有得到解决，请为我做一个看看：）

输入按钮结合背景和精灵悬停

1 个答案: