css 无法删除边框

r7xajy2e  于 2022-12-24  发布在  其他
关注(0)|答案(6)|浏览(174)

我不能从我的图像中删除边框。我已经尝试了很多次不同的属性。仍然看到白色边框。如果你有任何建议是什么原因造成的问题-请解释给我听。我有点新手。

<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>
idfiyjo8

idfiyjo81#

这是因为img标记必须有一个src="”,并带有适当的链接,否则它将显示图像作为背景,就像您的情况一样(因为img上的css),并在其顶部显示一个损坏的图像

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

这不是一个边界,你看到的是破碎的图像边界。
如果您想保留代码,请将img标签更改为div。

wvt8vs2t

wvt8vs2t2#

变更

border: none;

border: none !important;

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

of1yzvn4

of1yzvn43#

这可能是因为你的img标签上没有src属性,我建议在你的例子中使用透明像素作为src。

jjhzyzn0

jjhzyzn04#

  • 使用img src插入图像,并设置适当的高度和宽度。
  • 使用画图或其他工具编辑图像。例如。
  • 确保你的原始图像没有任何边界,如果它有简单的选择和裁剪图像.
qni6mghb

qni6mghb5#

也许边界不是html给定的,但它在你的img?
因此,在photoshop这样的图像程序工具中打开你的图像,放大到有边界的地方,看看是否有边界。

xeufq47z

xeufq47z6#

您正在尝试使用可在悬停事件上重新定位的背景图像在链接上设置图标图像。
最简单的方法如下。
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/

相关问题