css＆＃34; background-image＆＃34;显示不需要的边框，img＆＃34; src＆＃34;才不是

Question

Twitter Bootstrap入门，我遇到了一个奇怪的问题，我无法弄清楚原因。

使用以下方式渲染图像时

<img class="img-rounded" id="logo" />

并在CSS中：

#logo {
    background-image: url(/Content/Images/logo.png);
}

图像显示为窄边框＆＃39;：

即使我无法找到与此效果有关的任何内容。由于img-rounded类，角落是开放的。

使用以下方式渲染图像：

<img class="img-rounded" id="logo" src="~/Content/Images/SO.png" />

按预期渲染：

我怎样摆脱边界？ CSS代码我尝试过没有成功：

• border: none;
• color: blue;
• background-color: blue;
• border-style: none;

Answer 1

这应该有效。我认为问题与使用的img标记没有src属性有关。在这种情况下，我们只需使用div代码。

我之前在SO上遇到过这个问题，但我不记得那个问题的链接。

1）将您的height和width设为0。

2）根据图像大小给出适当的填充。 （即填充：宽度/ 2像素高度/ 2像素宽度/ 2像素高度/ 2像素）

简而言之，左右填充应添加到图像的width 和 您的顶部和底部填充应添加到图像的height。

img {
    background: url(http://i.stack.imgur.com/8C4wK.png) no-repeat;
    font-size:0;
    width:0px;
    height:0px;
    padding:36px 99px 36px 99px; /* Since height and width are 0. use appropriate padding. Image is of 197 X 73 dimension. So using 36px on left and right whereas 99px each on top and bottom*/
    border-style:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<img />

Answer 2

答案是不要使用<img>标记并尝试在css中设置background-image。

使用<div>或<img src="pic.png">，而不是两者的无效混合。

向rblarsen发出信函指出了这一点。

Answer 3

只需添加，希望它能正常使用

#logo {
    background-image: url(/Content/Images/logo.png);
    border-radius:0px;
    border:0px;
}

Answer 4

对于遇到这种情况的人，针对该问题的实际解决方案（而不是人们告诉您“只是不这样做”）是设置src图像变为空白图像；最好是1x1图像以减小负载大小，还可以选择作为合并的base64 URI来消除附加的HTTP请求（取决于哪种解决方案更合适）。

所以从OP的示例来看，更改后的代码：

<img class="img-rounded" id="logo" src="/images/blank.gif" />

或

<img class="img-rounded" id="logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" />

Answer 5

使用图像作为背景。为什么不将它设置为按钮的src属性

<input src="images/submit-bkg.png" id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>

当您将类型设置为图像时，输入也需要src属性..

参考：http://www.w3.org/TR/html401/interact/forms.html#adef-src和http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1