Question

嗨我正试图在页面的某个部分悬停时淡化背景图像。就像页面一部分的方形div一样。那可能吗？背景图像将是窗口的大小，正方形将在其上方，但不是完整大小。

有没有人有教程显示这个？

谢谢

Answer 1

使用CSS3过渡这应该有效：

#div{
    background: url("yourimage");
  }

#div:hover{
    @include transition-property(background);
    @include transition-duration(0.5s);
    background: none;
  }

以上示例是SASS。如果您不使用SASS，则需要使用更多代码行来实现跨浏览器兼容性。

参考：CSS3 Transitions

Answer 2

您不太可能找到确切的代码，所以这是逻辑

背景属性不能淡化，因此你需要使用带背景的div：url（imagepath.jpg），position：absolute，opacity：1和width：100％and min-height：800 so < / p>
在你的第二个div悬停时，你需要使用jquery动画效果并将不透明度设置为高于.5（或其他任何）的div

这将有助于我猜测

CSS背景图片淡出

2 个答案: