Question

人。我用提交按钮设置小形式。看起来像： enter image description here

正如您所看到的，提交图片周围有一些白色背景，我不知道为什么！图像切割得很好，我总是用透明背景剪切图像。

我的HTML：

<form action="#">
<textarea rows="4" cols="50"> </textarea>
<input type="submit" class="join-us" value="PŘIDEJ SE K NÁM">
</form>

CSS：

.join-us{
    background-image: url("images/join_us.png");
    background-repeat: no-repeat;
    width:181px;
    height: 114px;
    line-height: 114px;
    color: #f7f7f7;
    vertical-align: top;
    margin-top: 10px;
    margin-left: 10px;
    cursor:pointer;
    white-space: nowarp;
}

可以在http://funedit.com/andurit/new

上找到实时网站

你能帮我从那里移除那个白色的背景吗？

Answer 1

它不是白色背景，而是input元素的边框。只需将以下规则添加到.join-us类：

，即可使用CSS删除它

border: none;

您似乎还需要将按钮的高度调整为106px，因此您的最终类定义将如下所示：

.join-us{
    background-image: url("images/join_us.png");
    background-repeat: no-repeat;
    width:181px;
    height: 106px;
    line-height: 106px;
    color: #f7f7f7;
    vertical-align: top;
    margin-top: 10px;
    margin-left: 10px;
    cursor:pointer;
    white-space: nowrap;
    border: none;
}

Answer 2

设置

border: none;

是删除标准＆lt; button＆gt; -style的重要部分。但是，在你的情况下，它还不够：你还必须设置

height: 106px;

因为你的形象只是那么高。

Answer 3

它不是输入的背景。

您可以通过设置CSS属性border:none;，

轻松删除此白色边框

enter image description here 底部的白色背景是由Image引起的。这是因为你的图像底部有一些透明区域。如果要删除它，可以尝试将height: 106px;设置为CSS类.join-us。完成此操作后，您的输入看起来像这样： -

enter image description here

Answer 4

由于按钮具有默认边框样式，您需要覆盖：

border:none;

所以你的css应该是：

.join-us{
    background-image: url("images/join_us.png");
    background-repeat: no-repeat;
    width:181px;
    height: 114px;
    line-height: 114px;
    color: #f7f7f7;
    vertical-align: top;
    margin-top: 10px;
    margin-left: 10px;
    cursor:pointer;
    white-space: nowarp;
    .join-us{
        background-image: url("images/join_us.png");
        background-repeat: no-repeat;
        width:181px;
        height: 114px;
        line-height: 114px;
        color: #f7f7f7;
        vertical-align: top;
        margin-top: 10px;
        margin-left: 10px;
        cursor:pointer;
        white-space: nowarp;
    }

Answer 5

只需将以下CSS添加到.join-us类

即可

border:none;

Answer 6

您的背景图片高度和输入高度不相等。因此，当您在图像下看到时，您有一个显示背景颜色的空白区域。

所以你必须设置背景颜色等于透明或改变输入高度。

使用此：

background-color: rgba(0, 0, 0, 0);
background-image: url("images/join_us.png");
background-repeat: no-repeat;
border: 0 none;
color: #F7F7F7;
cursor: pointer;
height: 114px;
line-height: 114px;
margin-left: 10px;
margin-top: 10px;
vertical-align: top;
width: 181px;

Answer 7

.join-us {
    height:106px;
    border:none;
}

Answer 8

将这两种样式添加到.join-us类。

border: none;
background-size: 100% 108%;

border样式将删除图片周围的小行。 background-size样式将拉伸图像以完美地适合您的班级背景，没有空格。

Answer 9

您需要从样式表中删除border: 2px outset buttonface;。

删除图像周围的边框

9 个答案: