Question

我最近试图制作几个带有图像的彩色按钮制作这些按钮的最佳方法是什么？我觉得造型李。我的猜测是： http://jsfiddle.net/qvgtL8j3/

<ul id="leftsideul">
<li class="button blog"></li>
<li class="button jobs"></li>
<li class="button support"></li>
<li class="button arabic"></li>
</ul>

和：

#leftsideul .button{
    width: 99px;
    height: 32px;
    border-radius: 3px;
    background-color: grey;
}

#leftsideul .blog{
    background-image: url(http://i.imgur.com/g9cwJeh.png) no-repeat;
}

#leftsideul ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#leftsideul li{
    display: inline-block;
}

但问题是我无法看到这些图像。你对此有何看法？

Answer 1

您使用的是background-image属性，但使用的是速记背景语法。将background-image更改为background：

#leftsideul .blog{
    background: url(http://i.imgur.com/g9cwJeh.png) no-repeat;
}

<强> jsFiddle example

Answer 2

使用背景而不是背景图像 Example

#leftsideul .blog{
 height:32px ; 
   background: url('http://i.imgur.com/g9cwJeh.png') center center no-repeat;

}

制作带有图像的按钮时出现问题

2 个答案: