web-dev-qa-db-fra.com

Bordure étrange sur la balise IMG

HTML:

<html>
<body>

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

</body>
</html>

CSS:

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

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

D'une manière ou d'une autre, chaque fois que j'essaie de styler un img comme celui-ci une étrange bordure apparaît. Même si je placerais la frontière: 0PX; ou bordure: aucun; Dans l'img.logo CSS, la frontière reste.

htmlcssborderimage
35
Mark

Vous pouvez simplement utiliser div au lieu de img pour l'image de fond, si vous n'allez pas utiliser src attribut n'importe où.

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

sinon src est requis.

9
ALi Aryan

Cela fonctionne pour moi

img {
  text-indent: -999px;
}
2
Kirubel

Combinaison @ Thirtydot répond à cette question avec @ La réponse de layke pour la plus petite image Uri de données possible pour une image transparente , voici une solution tout-en-un:

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