爲什麼我的圖像周圍有邊框？

-2

我無法弄清楚爲什麼頂部圖像周圍有白色邊框。爲什麼我的圖像周圍有邊框？

這是CSS

font { 
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

.intro{ 
background:url(../images/2167265210_bf48820f23_o.jpg); 
background-position: center; 
height: 600px; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
text-align: center; 
font-weight: 100; 
} 
.intro h1{ 
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-weight:100; 
color: #fff; 
font-size: 16px; 
margin-bottom: 30px; 
}

這是HTML

<div class="intro"> 
<h1>blabla</h1> 
<a href="mailto:[email protected]" class="button">Neem contact op</a> 
</div>

我希望有人能幫助我！

來源

2013-12-21 user3095570

屏幕截圖顯示您談論的邊界和圖片本身將有所幫助。 – deW1

爲什麼使用'-o-background-size：cover;'？ –

你可以給我們一個截圖或圖像或jsfiddle的問題？ –

IE會在圖像周圍放置邊框，因爲其他瀏覽器不會。這是一些奇怪的錯誤，但這裏是如何解決它：

.intro{ 
background:url(../images/2167265210_bf48820f23_o.jpg); 
background-position: center; 
height: 600px; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
text-align: center; 
font-weight: 100; 

border:0px; 
outline:0px; 
}

來源

2013-12-21 12:08:02 aksu

有多種可能性，但沒有截圖或工作小提琴我不能看到excact問題。

圖像本身的白色邊框
通過瀏覽器中的圖像
默認瀏覽器保證金
也許從H1

解決方案中的保證金周圍產生白色邊框爲1：編輯圖像。

解決方案2,3,4：
使用border:none;的圖像，或margin:0爲body和<h1>喜歡這裏。

img { border:none; }      /* Border around the image */ 
html, body {margin:0; padding:0;}  /* Default margin from browsers */ 
h1 {margin:0; padding:0;}    /* Default margin/padding from the h1 */

但沒有打印屏幕或Jsfiddle，我沒有看到excact問題。

來源

2013-12-21 12:05:02

這可能會解決它，但圖片本身也可能有空白:) – deW1

確實，這就是爲什麼我們需要更多的不僅僅是代碼，例如te圖像本身。 –

爲什麼我的圖像周圍有邊框？

回答

相關問題