css - CSS 背景图像渐变

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 过渡

Answer 2

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

1. Background 属性不能为 fade ，因此您需要使用带有 background:url(imagepath.jpg),position:absolute,opacity:1 和 width:100% 和 min-height:800 等的 div

2. 在您的第二个 div 悬停时，您需要使用 jquery 动画效果并将不透明度设置为上述 div 的 0.5（或任何值）

这将有助于我猜