Html css"；背景图像“；显示不需要的边框，img“；src"；不

在开始使用Twitter引导时，我遇到了一个奇怪的问题，我无法找出原因

使用以下命令渲染图像时：

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

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

图像显示为窄“边框”：

尽管我找不到任何与这种效应有关联的东西。由于

img圆角

类，拐角是开放的

使用以下命令渲染图像：

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

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

按预期呈现：

我怎样才能摆脱边境？ 我尝试过的CSS代码没有成功：

• 边框：无

• 颜色：蓝色

• 背景色：蓝色

• 边框样式：无

---

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

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

将类型设置为image时，输入也需要src属性

---

参考：只需添加这个，希望它能正常工作

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

---

这应该行得通。我认为问题在于没有使用

src

属性的

img

标记。在这种情况下，我们可以简单地使用

div

标记

我之前遇到过这个问题，所以我不记得与这个问题的联系

1） 将

高度

和

宽度

设为0

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

简言之，您的左、右填充应该添加到图像的

宽度

及 您的顶部和底部填充应添加到图像的

高度


img{
背景：url(http://i.stack.imgur.com/8C4wK.png)不重复；
字号：0；
宽度：0px；
高度：0px；
填充：36px 99px 36px 99px；/*因为高度和宽度为0。请使用适当的填充。图像的尺寸为197 X 73。因此，在左侧和右侧使用36px，而在顶部和底部使用99px*/
边框样式：无；
}
答案是不要使用
，也不要两者混合使用

感谢rblarsen指出了这一点。
对于遇到这种情况的人来说，解决问题的实际方法是将图像的
src
设置为空白图像；优选地，使用
1x1
映像来减小负载大小，并且可选地甚至作为合并的
base64
URI来消除额外的HTTP请求（取决于哪个解决方案更合适）

因此，从OP的示例来看，修改后的代码：



或


为什么要在图像上插入背景图像？
边框样式：无
？正在尝试实现类似的效果？在
标签上使用图像作为
背景图像并不是一个好主意。@rblarsen问得好。我最初有一个css，但看到一个引导示例，我决定将其更改为一个没有任何意义的css。我又把它改成了a，效果很好。我有不同的主题，用css文件来改变这个标志。我不想将逻辑移到标记上以设置正确的src。