径向渐变背景没有正确过渡答案

【问题标题】：Radial gradient background not transitioning properly径向渐变背景没有正确过渡
【发布时间】：2017-12-06 02:58:36
【问题描述】：

悬停时，我无法让背景在悬停时从 0 不透明度过渡到 0.6。这是我的 CSS：

.work--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient( rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0));
    opacity: 1;
    z-index: 1;
    transition: background 0.3s ease-in-out;
}

    .work--overlay:hover {
        background: radial-gradient( rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
        transition: background 0.3s ease-in-out;
    }

我还应该提到，效果确实适用于悬停，只是过渡缓动部分不起作用。所以我 99% 确定这是 CSS 的东西。

【问题讨论】：

Use CSS3 transitions with gradient backgrounds的可能重复
@ObsidianAge :// 拍得好

标签： css hover css-transitions

【解决方案1】：

对您的代码进行了一些更改，主要是为了不透明度和从悬停状态移除过渡：

 ...

    opacity: 0;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

    .work--overlay:hover {
      opacity:1;
      background: radial-gradient( rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    }

这里是一个工作过渡：https://jsfiddle.net/g6a0b2zg/

【讨论】：

这对我不起作用，因为有些子元素的不透明度在其他悬停时发生了变化。
在这种情况下，是否有机会为非悬停状态指定背景颜色？更新样本jsfiddle.net/g6a0b2zg/1
我有点用你的答案来解决它。我最终在悬停时将不透明度更改为 1，但是渐变背景的不透明度设置为 0.6。所以当背景达到 100% 的不透明度时，它实际上是 60%。谢谢:)

【解决方案2】：

我之前遇到过这个问题。我添加了一个 ::before 伪类来转换不透明度而不是背景。基本上，您创建一个位于实际类下方的前类（请参阅位置和 z-index 的更改）。然后，当它悬停时，它使图层可见。

.work--overlay {
  position: relative;
  z-index: 50;

    width: 100%;
    height: 100%;
    background: radial-gradient( rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0));

    transition: opacity 0.3s ease-in-out;
}

.work--overlay:before {
          background: radial-gradient( rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -100;
  position: absolute;
  content: '';
  opacity: 0;
  transition: opacity 3s ease-in-out;
}


    .work--overlay:hover:before {
       opacity:1;
    }

【讨论】：