2013-09-23 23 views
2

我无法从我的图像中删除边框。我已经尝试了很多次不同的属性。仍然看到白色边框。如果您有任何问题,请向我解释。我有点新手。我无法删除边框

<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> 
+0

确定的IMG元素是正确的宽度和高度,你所使用的图像? :) – Pawcu

+0

我会建议不要使用没有src属性的img标签。 –

+1

请显示截图并显示图片。 – MMM

回答

5

这是因为一个img标签必须有一个src =“”有一个适当的链接,否则它会显示图像作为背景像你的情况(因为imss上的css)和一个破碎的图像它

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

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

如果你要保持你的代码,img标签更改为一个div ..

+0

我认为你基本上是正确的。问题出现在Chrome中,而不是Firefox。 –

+0

谢谢。有用! :D我已经更改为div,现在它运行完美。再次感谢! – Ivelios

0

也许边界不是给定的HTML,但它在你的IMG?

因此,在像Photoshop这样的图像程序工具中打开您的图像,并缩放到边框所在的位置并查看,如果有边框。

+0

我检查了两次。没有边界。我扩大了画布大小,以便看到“隐藏”一个但没有 - 图像中没有边框。 – Ivelios

+0

为什么你将你的img作为背景进行整合,而不是只将它们设置为img标签中的src属性? –

0

这可能是因为您的img标签上没有src属性。我会推荐在你的情况下使用透明像素作为src。

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

变化

border : none; 

border : none !important; 

这样,它会因此覆盖所有家长的声明有工作。

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/