如何在沒有白色邊框的情況下使用CSS居中圖像

這是我的CSS和HTML代碼。我想把一個圖像放在中心，除了圖像周圍有一個奇怪的白色邊框之外，這個圖像可以工作。我曾嘗試border:none;和border:0;如何在沒有白色邊框的情況下使用CSS居中圖像

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

來源

2012-10-17 Sammy Guergachi

爲什麼不把你的圖像源放在'img'而不是'css'中？例如'' –

你確定圖像本身沒有白色邊框？不是諷刺，只是我自己做了幾次，才意識到白色邊框是圖像本身的一部分，而不是HTML或CSS。 – robx

我不知道爲什麼你設置的背景圖像的img標籤，我寧願使用div或span標籤。但是，如果你真的想這樣做，嘗試添加到您的IMG＃圖片CSS規則：

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

來源

2012-10-17 01:31:35

工作正常！謝謝！ –

我不知道如果你試圖簡化代碼，但是：

1）SRC圖像丟失：<img src= "myimage.jpg" />。

2）不要在CSS中使用border:none

3）使用border="0"而不是不給一個背景圖像，也許改用一個部門。

除此之外，我在測試代碼時沒有看到任何白色邊框。你能更具體嗎？

來源

2012-10-17 01:46:15 multimediaxp

另外請確保soon_comp.png的寬度是：337px;高度：219px;如果沒有，你一定會看到一些白色邊框或圖像重複，但我強烈建議使用源圖像或帶有背景圖像的部門。 – multimediaxp

如何在沒有白色邊框的情況下使用CSS居中圖像

回答

相關問題