Comment centrer l'image à l'aide de CSS sans bordure blanche

Voici mon code CSS et HTML. Je veux mettre une image unique dans le centre et cela fonctionne sauf qu'il n'y est une drôle de bordure blanche autour de l'image. J'ai essayé border:none; et border:0;

HTML:

<!DOCTYPE html>
<html>

<head>
<title>Food.</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/png" href="favicon.ico">

</head>


<body>
<img border="0" id="image" class="centered" />

</body>

</html>

CSS:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -182px;
  margin-left: -153px;

}

img#image{
   /*I think this is where the issue is caused*/
    width:337px;
    height:219px;
    background-image: url('soon_comp.png');
    background-color: transparent;
}


body {
    outline: none;
    background-color: rgb(15,15,30);
    border-color:transparent;
    border:0px;
}
pourquoi ne pas mettre votre source de l'image dans img au lieu de la css? par exemple, <img id="image" src="soon_comp.png" class="centered"/>
Et vous êtes sûr que l'image elle-même n'a pas de bordure blanche? Pas du sarcasme, c'est juste que je l'ai fait moi-même un peu de temps avant de réaliser que la bordure blanche a été la partie de l'image elle-même, et pas à cause de HTML ou CSS.

OriginalL'auteur Sammy Guergachi | 2012-10-17

  1. 9

    Je ne sais pas pourquoi vous êtes à la définition d'une image d'arrière-plan pour une balise img, je préfère utiliser un div ou span tag à la place. Mais, si vous voulez vraiment faire cela, essayez d'ajouter à votre img#image de la règle CSS:

    img#image{
  content: '';
  ...
}
    Qui a travaillé! Merci!

    OriginalL'auteur Alcides Queiroz Aguiar

  2. 0

    Je ne sais pas si vous avez essayé de simplifier votre code mais:

    1) Le src de l'image est manquante: <img src= "myimage.jpg" />.

    2) N'utilisez pas de border="0" au lieu de CSS utilisation border:none

    3) Ne pas donner un arrière-plan d'une image, peut-être, au lieu d'utiliser une division.

    Outre que je ne vois pas de bordure blanche quand je l'ai testé votre code.
    Pouvez-vous être plus précis, peut-être?

    Assurez-vous également que soon_comp.png est exactement largeur:337px; hauteur:219px; si non, vous aurez certainement voir un peu de blanc de frontières ou de la répétition d'image, mais je vous suggère fortement d'utiliser l'image de la source ou d'une division avec une image d'arrière-plan.

    OriginalL'auteur multimediaxp