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

Getting started with Twitter Bootstrap, I ran into a strange problem of which I can't figure out the cause.

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

When I render an image using:

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

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

and in CSS:

在CSS中：

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

The image is shown with a narrow 'border':

图像显示为窄边框：

Even though I can't find anything remotely related to this effect. The corners are open because of the img-rounded class.

即使我找不到与此效果有关的任何东西。角落是开放的，因为img-round类。

Rendering the image using:

使用以下方法渲染图像：

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

Renders as expected:

按预期渲染：

How can I get rid of the border? CSS code I've tried without success:

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

border: none;
border：none;
color: blue;
颜色：蓝色;
background-color: blue;
背景颜色：蓝色;
border-style: none;
border-style：none;

4 个解决方案

#1

This should work. I believe the problem is to do with the img tag used without the src attribute. In that case, we can simply use a div tag.

这应该工作。我认为问题是使用没有src属性的img标签。在这种情况下，我们可以简单地使用div标签。

I have come across this problem earlier on SO, I do not remember the link to that question though.

我早些时候在SO上遇到过这个问题，但我不记得那个问题的链接了。

1) Make your height and width as 0.

1）使你的身高和宽度为0。

2) Give appropriate padding as per the image size. (i.e padding: width/2px height/2px width/2px height/2px )

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

In short your left and right padding should add upto width of the image AND your top and bottom padding should add upto height of the image.

简而言之，左右填充应该添加到图像的宽度，并且顶部和底部填充应该添加到图像的高度。

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 />

#2

Just add this, hope it'll work well

加上这个，希望它能很好地运作

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

#3

The answer is not to use an <img> tag and try to set a background-image in css.

答案是不要使用 css“background-image”显示不需要的边框，img“src”没有标签并尝试在css中设置背景图像。

Either use a <div> or <img src="pic.png"> and not an invalid mix of both.

使用

或

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

而不是两者的无效混合。

Credits to rblarsen who pointed this out.

对于指出这一点的rblarsen的信用。

#4

using the image as a background. Why not set it as the src property of the button

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

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

When you set the type as image the input expects an src attribute as well..

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

Reference: http://www.w3.org/TR/html401/interact/forms.html#adef-src and http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1

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

#1