我无法删除边框

时间:2013-09-23 14:19:38

标签: html css image border

我无法从我的图片中删除边框。我尝试了很多次使用不同的属性。仍然看到白色边框。如果您有任何建议导致问题的原因 - 请向我解释。我是新手。

<head>
    <style>
    img{
    border : none;
    text-decoration: none;
    }
    #forum
    {
        background:url(forum_button.png) 0px 0px no-repeat; 
        width: 300px; 
        height: 81px;

    }
    #forum:hover
    {
        background:url(forum_button.png) -300px 0px no-repeat; 
        width: 300px; 
        height: 81px;
    }
    #facebook
    {
        background:url(social_buttons.png) 0px 0px no-repeat;
        width: 29px; 
        height: 29px;
    }
    #facebook:hover
    {
        background:url(social_buttons.png) 0px -33px no-repeat;
        width: 29px; 
        height: 29px;
    }
    #twitter
    {
        background:url(social_buttons.png) -31px 0px no-repeat;
        width: 29px; 
        height: 29px;
    }
    #twitter:hover
    {
        background:url(social_buttons.png) -31px -33px no-repeat;
        width: 29px; 
        height: 29px;
    }
    </style>
    </head>
    <body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;">
    <a href="#"><img id="forum" /></a>
    <div id="social">
    <a href="#"><img id="facebook"></a>
    <a href="#"><img id="twitter"></a>
    </div>

6 个答案:

答案 0 :(得分:8)

这是因为img标签必须有一个带有正确链接的src =“”,否则它会像你的情况一样将图像显示为背景(因为img上有css),并且它上面有一个破碎的图像

="#"><img id="facebook"></

它不是边框,你看到的是破碎的图像边框。

如果您想保留代码,请将img标记更改为div ..

答案 1 :(得分:1)

更改

border : none;

border : none !important;

这样它将覆盖所有父声明,因此必须工作。

答案 2 :(得分:0)

也许边框不是html,而是你的img?

因此,在像photoshop这样的图像程序工具中打开图像,并缩放到边框所在的位置,看看是否有边框。

答案 3 :(得分:0)

这可能是因为您的src代码中没有img属性。我建议在你的情况下使用透明像素作为src。

答案 4 :(得分:0)

  • 使用具有适当高度和宽度的img src插入图像。
  • 使用绘画或其他工具编辑图像。 例。
  • 如果原始图像只是选择并裁剪图像,请确保原始图像没有任何边框。

答案 5 :(得分:0)

您正尝试使用可在悬停事件中重新定位的背景图像在链接上设置图标图像。

最简单的方法如下。

HTML可以简单:

<a class="test" id="test" href="#"></a>

并应用以下CSS:

.test {
    background: beige url(http://placekitten.com/50/50) center center no-repeat;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: none;
}

在链接(a标记)上应用背景图片,而不是img标记,这是不需要的。

请参阅演示:http://jsfiddle.net/audetwebdesign/qAeHL/