IMG标签去除边框

Question

http://www.flirtwithme.co/main.php#upgrade

这个页面上有一个蓝色的盒子图片，周围有一个灰色的边框。我一直在尝试去掉边框但没有成功。

例如：

border: none;
outline: none;

这张图片是精灵图中的一部分，并且周围没有边框。

* 这张图片是右侧的那个 - 蓝色框里带有勾号（在精灵图中是顶部第二个）。

- Adam

---

你在说哪一张图片？ - Rob W

图片是右边那个 - 一个带有勾号的蓝色框。在精灵图中是第二个顶部的图像。 - Adam

是的，我也尝试了border:0;...但没有成功...非常奇怪...通常都可以用的... - Adam

img标签位于<li>标签内...不确定这是否会对任何内容产生影响。 - Adam

Answer 1

您的图片没有src属性，请将一个transparent.gif作为源添加，边框就会消失。

示例：

<img class="benefitImg" id="iconPersonalizeProfile" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif">

更新：

使用精灵图作为列表元素的背景图片的示例。 （在这种情况下，您需要将精灵重新排列为垂直精灵）

http://jsbin.com/ebovod/edit#html,live

- Burntime

---

哦，好的...我试图从CSS背景设置src...有趣...有没有一种不需要另一个img的方法呢？ - Adam

更好的方法是，不要使用图像标签，而是将背景图像放在LI上，并添加一些左填充以确保文本不重叠-这将允许您删除IMG标签。Burntime是正确的，灰色边框出现是因为您有一个没有源的图像标签，因此它正在显示错误。 - Chris

同意Chris的观点，将背景设置为LI并设置一些填充。 - Burntime

在这种情况下，返回到您的原始代码并将IMG标记更改为SPAN标记，并将背景图像应用于该标记。 - Chris

你需要以不同的方式布局精灵，但在li上放置背景是首选方法。我提供了一个示例来修复您当前的方法。 - Craig

Answer 2

如果您要使用CSS背景图像，使用<img>标签就没有意义。在<img>标签中，src属性用于指定前景图像，这是该标记的必需属性。如果省略它，将会产生意想不到的结果，例如您看到的边框效果，但这可能因浏览器而异。

如果要使用CSS background-image，请使用不同的HTML标记（例如<div>）。

如果要使用<img>标记，则需要使用src属性，而不是在CSS中定义它。

关键在于语义。在<img>标记中的图像被认为是页面内容的一部分，因此图像在HTML代码中指定，而通过在CSS中定义图像，您正在表示它是设计的一部分，而不是内容。

您应该使用与网站中图像用途相匹配的方法。

- Spudley

Answer 3

我刚刚遇到了关于标签周围白色边框的问题。为了解决这个问题，我将标签改成标签。这样可以控制content样式或background-image样式，而不会留下丑陋的白色边框。(需要添加以下CSS)

object {
    border: none;
}

我知道这个问题已经有答案了，但是我希望它对其他人也有用。

- Anake.me

Answer 4

我只是这样做了

<img src="img/my-image.jpg" style="border:none;" />

- Noji

Answer 5

你在一个<img>标签上设置了背景图片。这是非常不好的做法。

我的建议是将你的标记更改为以下内容： （请注意使用<span>标签代替<img>标签）

<ul>
    <li>
        <span class="benefitImg" id="iconPersonalizeProfile"><span>
        Personalize your Profile using Custom Themes
    </li>
</ul>

然后应用这些样式：

#iconPersonalizeProfile {
    background: url("http://www.staticimages.co/seemeagain/upgrade-sprite.png") -35px -3px;
    display:block;
    width: 25px;
    height: 25px;
    float: left;
}

那应该可以解决你的问题。

- Craig

---

使用空的<span>标签在语义上并不是更好的选择。强制行内元素表现为块级元素也不是最佳方式。 - Burntime

同意，不过这解决了原帖作者的问题。最佳方案如上 - <li> 上放置一个背景图片。至于强制内联元素成为块级元素，HTML5 中的 header 和其他默认不是块级的元素怎么办？ - Craig