css“背景图像”显示不需要的边框，img“ src”才不是 [英] css "background-image" shows unwanted border, img "src" does not

问题描述

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

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

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

When I render an image using:

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

并在CSS中：

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

显示的图像带有狭窄的边框：

The image is shown with a narrow 'border':

即使我找不到与该效果遥遥相关的任何东西。由于 img舍入的类，角是开放的。

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

使用以下图像渲染图像：

Rendering the image using:

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

预期的渲染：

如何摆脱边界？
我尝试过但未成功的CSS代码：

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

• border：无；


• 颜色：蓝色；


• background-color ：蓝色；


• 边框样式：无；

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

推荐答案

答案不是使用< img> 标记并尝试在CSS中设置背景图像。

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

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

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

对rblarsen指出了这一点。

Credits to rblarsen who pointed this out.

这篇关于css“背景图像”显示不需要的边框，img“ src”才不是的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！