Question

我有一个带圆角的图像（png透明的角落），大约150px宽，25px高，所以我试图使用它，但它对我不起作用：

<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（使用它！）很明显发生了什么。你的右角显示，但随着它下面的按钮继续，你根本看不到它。

你可以使用两个图像来解决这个问题，左边的一个小图像（不是那么宽，左边的填充的最小宽度）和右边的一个非常宽的图像。这样你的按钮就不会重叠，你会得到理想的效果。

Answer 2

首先要做的事情：如何展示？您在左右角使用相同的背景图像。这是有序的吗？（我从技术上可以知道它可能）另外，你可能想尝试切换两个（左/右），因为span不是块元素，这可能会导致你的问题（就像你可以做的一样）比如说，将宽度设置为跨度，除非你还将其设置为渲染为块）

Answer 3

你的span和button元素具有相同的高度（顺便说一下，它比图像高度小）。另一个观察结果：为什么你需要span元素？

从最简单的方式开始：

    <button>Click me!</button>

button {
border: 1px solid #ff0;
padding: 10px;
display:block;
background:transparent url(../images/button.png) no-repeat top centre;
height:25px;

}

这应该显示您的图像。使用border属性来调试CSS

Css圆形图像

3 个答案: