Html IMG 标签上的奇怪边框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5743083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:09:11  来源:igfitidea点击:

Strange border on IMG tag

htmlcssborderimage

提问by Mark

HTML:

HTML:

<html>
<body>

<header>
    <img class="logo" />
</header>

</body>
</html>

CSS:

CSS:

* {
    margin:0px;
    padding:0px;
    border:none;
}

img.logo {
    width:126px;
    height:50px;
    background-image:url('images/logo.png');
}

One way or another everytime i try to style an IMG like this a strange border appears. Even if I would place border:0px; or border:none; in the img.logo css the border remains.

每次我尝试像这样设置 IMG 样式时,都会以一种或另一种方式出现奇怪的边框。即使我会放置 border:0px; 或边界:无;在 img.logo css 中,边框仍然存在。

回答by thirtydot

It's the default "special" border that appears when you use an imgelement with an a srcattribute set to something that doesn't exist (or no srcat all).

当您使用img一个src属性设置为不存在(或根本不存在src)的元素时,会出现默认的“特殊”边框。

A common workaround is to set the srcto a blank.giffile:

一种常见的解决方法是将 设置srcblank.gif文件

<img class="logo" src="blank.gif" />

I have to point out that it (in this case) makes no sense to use an <img>with background-image. Just set the srcattribute and forget about background-image.

我必须指出(在这种情况下)使用<img>with是没有意义的background-image。只需设置src属性并忘记background-image.

回答by ALi Aryan

You can Simply Use divinstead of imgfor background image , if you are not going to use srcattribute anywhere.

如果您不打算在任何地方使用属性,您可以简单地使用div代替img背景图像src

<div class="logo"> </div>

otherwise srcis required.

否则src是必需的。

回答by Kirubel

This works for me

这对我有用

img {
  text-indent: -999px;
}

回答by Briguy37

Combining @thirtydot's answer to this questionwith @Layke's answer for Smallest data URI image possible for a transparent image, here is an all-in-one solution:

@thirtydot 对这个问题的回答@Layke 对透明图像的最小数据 URI 图像的回答相结合,这是一个多合一的解决方案:

<img class="logo"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>