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

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