Css 圆形图像

Question

我有一个带圆 Angular 的图像( Angular 上透明的 png)，宽约 150 像素，高 25 像素，所以我正在尝试使用它，但它对我不起作用:

<button><span>Click me</span></button>

还有CSS:

button{
    border:0;
    background:url(../images/button.png) no-repeat top left;
    height:24px;
    padding-left:10px;
}

和

button span{
    display:block;
    background:transparent url(../images/button.png) no-repeat top right;
    height:24px;
    padding-right:10px;
}

但是它不能正常工作，右上角没有正确显示。有什么帮助吗？

最好的问候，

Answer 1

使用 Firebug(使用它!)很清楚发生了什么。你的右上角显示了，但随着它下面的按钮继续，你根本看不到它。

您可以使用两张图片来解决这个问题，一张小图片(不是那么宽，左侧填充的最小宽度)用于左 Angular ，一张非常宽的图片用于右 Angular 。这样你的按钮就不会重叠，你会得到想要的效果。