响应背景图像创建额外空间

我有一个响应标题我创建了一半的作品。响应背景图像创建额外空间

在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

响应背景图像创建额外空间

回答

相关问题