响应式背景图像创造了额外的空间

Question

我创建了一个响应式标题，其中一半是有效的。

在Google Chrome中，当窗口缩小时，它会增加额外的间距，而FireFox则不允许灰度效果。我想删除那个间距并允许灰度悬停。

这是两者之间的区别。

网址为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%);

}

Answer 1

间距解决方案

#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内部过滤器对其图像进行灰度化。

Answer 2

您应该将背景居中并为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");
}