Question

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

在此页面上有一个蓝色方框图像，周围有灰色边框。我一直试图在没有运气的情况下移除边界：

例如：

border: none;
outline: none;

图像是精灵的一部分，图像周围没有边框。有什么想法吗？

* 图像是右侧的图像 - 蓝色框中带有勾号。（精灵顶部的第二个。

Answer 1

您的图片没有src属性向源添加transparent.gif，边框将消失。

示例：

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

<强>更新

列表元素上的sprited背景图像示例。（在这种情况下，您必须将精灵重新排列为垂直精灵）

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

Answer 2

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

如果您想使用CSS background-image，只需使用其他HTML标记（例如<div>）。

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

这里的重点是语义。假定<img>标签中的图像是页面内容的一部分，因此图像在HTML代码中指定，而通过在CSS中定义图像，您说它是设计的一部分，而不是满足。

您应该使用与网站中图片目的相符的方法。

Answer 3

我刚才遇到了这个问题，我的img标签周围有白色边框。要解决此问题，我已从<img />更改为<object></object>。这使我能够控制content样式或background-image样式，而不会留下丑陋的白色边框。（必须在CSS下面添加）

object {
    border: none;
}

我知道这已经得到了解答，但我希望它可能会对其他人有用。

Answer 4

您已在<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;
}

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

IMG标签删除边框

4 个答案: