Question

我在这里张贴了一个按钮：

http://buttontest.raptorshop.com/

但由于某种原因，它并没有完全排队。是什么导致这种情况？

我尝试过改变行高，填充等等。

这是我的CSS代码：

a.gbutton {
    background: transparent url('buttonside.png') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 82px;
    margin-right: 6px;
    padding-right: 46px; /* sliding doors padding */
    text-decoration: none;
}

a.gbutton span {
    background: transparent url('buttonmain.png') no-repeat;
    display: block;
    line-height: 68px;
    padding: 5px 0 5px 18px;
}

我正在通过网上找到的教程对此进行修改，完美的CSS放置对我来说一直是个难题。

Answer 1

滑动门技术的工作原理是因为延伸矩形不会改变其外观。但是扩展椭圆会，因此您的代码将无法按预期工作。

这是我能得到的最好的：

a.gbutton {
    background: transparent url('buttonside.png') no-repeat scroll right top;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 82px;
    margin-right: 10px;
    padding-right: 51px;
    text-decoration: none;
}

a.gbutton span {
    background: transparent url('buttonmain.png') no-repeat left top;
    background-size: 100% auto;
    display: block;
    line-height: 68px;
    padding: 5px 0 5px 18px;
    height: 100%;
    width: 100%;
}

<强>更新

只需使用单个图像并指定CSS：

background-size: 100% auto;

为什么我的按钮没有完全排队？

1 个答案: