響應背景圖像創建額外空間

我有一個響應標題我創建了一半的作品。響應背景圖像創建額外空間

在Google Chrome瀏覽器中，當窗口縮小並且FireFox中不允許灰度效果時，它會增加額外的間距。我想刪除該間距並允許灰度懸停。

enter image description here

這是兩者之間的區別。

網址是http://www.bradlyspicer.net

#header { 
    min-height: 310px; 
    margin: 0px; 
    padding: 0px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width: 100%; 
} 

.home-header { 
    min-height: 310px; 
    background-image: url('http://hdwallpapercollection.com/wp-content/uploads/2013/08/roma-city-wallpaper.jpg'); 
    background-repeat: no-repeat; 
    background-position: 0% -150; 
     -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
     filter: grayscale(100%); 
     -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    /* ...and now for the proper property */ 
    transition:.5s; 
} 
.home-header:hover { 
     -webkit-filter: grayscale(0%); 
     -moz-filter: grayscale(0%); 
     -o-filter: grayscale(0%); 
     -ms-filter: grayscale(0%); 
     filter: grayscale(0%); 

}

來源

2013-10-04 Bradly Spicer

的間距

#header{ 
    background-position:initial; 
}

原因解決方案：這是因爲最初你background-position設置爲0% -150於是有人使它之間的空間。

在Firefox灰度解決方案

.home-header{ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
    filter: grayscale(100%); 
}

原因：這是因爲現在的Firefox使用灰度過濾器內SVG自己的形象。

來源

2013-10-04 16:30:40

嗨，感謝您的評論，它是否採取灰度（100％）或0.33％的部分作爲值，與參數略有混淆haha –

其實它是用svg寫的，因爲之前的濾鏡是爲svg開發的。現在，它適用於包含圖像的其他人。不要擔心0.33％，因爲您的圖片灰度會變爲100％。 –

您應圍繞你的背景，並添加過濾器FF。

#header{ 
    background-position: center center; 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
}

來源

2013-10-04 16:09:13 Jaap

響應背景圖像創建額外空間

回答

相關問題