Question

我正在尝试练习我的jquery和javascript。当用户点击arrow.png时，我正在研究一个旋转备注的小提琴。但由于某种原因，它没有显示，我无法测试我的代码大声笑......我打算添加CSS动画，以及它旋转而不是使用JavaScript。这是小提琴http://jsfiddle.net/wrkmH/6/。我的CSS没有显示出什么问题？我知道这是一个非常noob的问题，对不起我只是想不出来。 html：

<p>I'm a <span id="remark">nice guy </span>.
   <a href="#" id="spinner" class ="anim"></a>
</p>

css：

#spinner {
   height: 30px;
   background-image:url('http://i.imgur.com/bfhwPv9.png');
   background-repeat:no-repeat;
   display: inline-block;    
}

Answer 1

您正在加载“http://i.imgur.com/bfhwPv9.png”的图片为200px x 200px。您目前将高度设置为仅30px。如果您将#spinner设置为图片尺寸：

#spinner {
    height: 200px;
    width: 200px;
    background-image:url('http://i.imgur.com/bfhwPv9.png');
    background-repeat:no-repeat;
    display: inline-block;    
}

您将能够看到微调器：demo fiddle

Answer 2

试试这个

#spinner {
    height: 200px;
    background-image:url('http://i.imgur.com/bfhwPv9.png');
    background-repeat:no-repeat;
    display: block;    
}

Answer 3

只需用以下内容替换你的css，

#spinner {
    height: 200px;
    width:  200px;
    background-image:url('http://i.imgur.com/bfhwPv9.png');
    background-repeat:no-repeat;
    display: inline-block;    
}

这可以解决您的问题。继续编码：）

无法在这个小提琴中显示背景图像

3 个答案: