Question

我正在使用css过渡来对background-image属性产生淡入和淡出效果。当用户滚动时，该属性通过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元素。它似乎只在大多数浏览器上淡出，但不会淡入。它在chrome中正常工作。

Q1：有更清洁的方法吗？将透明PNG作为背景元素添加到nav元素看起来像是一个黑客。

Q2：这仍然无法在Firefox，IE或Safari上运行。任何人都可以建议一个干净的修复？

Answer 1

您可以使用伪元素“伪装”背景图像不透明度：

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。

css过渡背景图像淡入淡出

1 个答案: