css "background-image" 显示不需要的边框，img "src" 没有

Question

开始使用 Twitter Bootstrap，我遇到了一个奇怪的问题，我无法找出原因。

当我使用以下方式渲染图像时：

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

在 CSS 中：

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

图像以窄“边框”显示：

即使我找不到与此效果相关的任何东西。由于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>标签，尝试在css中设置background-image。

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

感谢指出这一点的 rblarsen。

Answer 2

这应该可行。我相信这个问题与没有使用src 属性的img 标记有关。在这种情况下，我们可以简单地使用div 标签。

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

1) 将 height 和 width 设为 0。

2) 根据图像大小提供适当的填充。 （即填充：宽度/2px 高度/2px 宽度/2px 高度/2px）

简而言之，您的左右填充应添加到图像的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 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