CSS过渡背景图像褪色

Question

我正在使用css过渡来引起背景图像属性的渐入和渐出效果。当用户滚动时，通过jquery更改属性。

它最初不能在任何浏览器上工作。我发现在原始元素上设置一个完全空的/透明的PNG文件可以使chrome工作，但其他浏览器仍然不行。

下面是一个示例代码:

nav {
background:url(/img/empty.png);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
}
.contrast {
    background:#3a3a3a url(/img/xnav.jpg);
    background-origin:border-box;
    background-position:top;
    background-repeat:repeat;
    background-size:50px 50px;
}

对比类通过jquery应用于nav元素。它似乎只在大多数浏览器上淡出，而不是淡出。

问题1:有没有更干净的方法来做这件事?在nav元素中添加透明的PNG作为背景元素似乎是一种hack。

问题2:这在firefox, IE或Safari上仍然不能工作。谁能提出一个干净的解决办法?

Answer 1

你可以在your:

上使用pseudo-element来设置背景图像的不透明度

nav{
  position:relative;
}
nav::before{
  content: "";
  background: url(/img/xnav.jpg);
  background-origin:border-box;
  background-position:top;
  background-repeat:repeat;
  background-size:50px 50px;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  transition: opacity 1s ease-in-out;
}
.contrast{ // applied on nav::before
  opacity: 1;
}

感谢Nicolas Gallagher。