Jak wyśrodkować obraz za pomocą CSS bez białej granicy

Oto mój kod CSS i HTML. Chcę umieścić pojedynczy obraz w środku i działa to z wyjątkiem dziwnej białej ramki wokół obrazu. Próbowałem border:none; i border:0;Jak wyśrodkować obraz za pomocą CSS bez białej granicy

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; 
}

Źródło

2012-10-17 Sammy Guergachi

dlaczego nie umieścić źródła obrazu w 'img' zamiast' css'? na przykład '' –

Czy jesteś pewien, że sam obraz nie ma białego obramowania? Nie jestem sarkastyczny, tylko że zrobiłem to sam kilka razy, zanim zdałem sobie sprawę, że biała granica jest częścią samego obrazu, a nie z powodu HTML lub CSS. – robx

nie wiem dlaczego jesteś ustawienie obrazu tła dla znacznika img Zamiast tego wolałbym użyć tagu div lub span. Ale jeśli naprawdę chcesz to zrobić, należy dodać do reguły # img obrazu CSS:

img#image{ 
    content: ''; 
    ... 
}

Źródło

2012-10-17 01:31:35

To działało! Dzięki! –

ja nie wiem, czy próbował uprościć kod, ale:

1) src obrazu brakuje: <img src= "myimage.jpg" />.

2) Nie używaj border="0" zamiast w użyciu CSS border:none

3) Nie daje tło do obrazu, może zamiast użyć podział.

Poza tym nie widziałem żadnej białej granicy, kiedy testowałem twój kod. Czy możesz być bardziej konkretny?

Źródło

2012-10-17 01:46:15 multimediaxp

Upewnij się również, że plik soon_comp.png ma dokładnie szerokość: 337 pikseli; wysokość: 219 pikseli; jeśli nie, na pewno zobaczysz białe obramowania lub powtórzyć obraz, ale zdecydowanie polecam użyć obrazu ze źródłem lub podziałem z obrazem tła. – multimediaxp

Jak wyśrodkować obraz za pomocą CSS bez białej granicy

Odpowiedz

Powiązane problemy