javascript - 如何在没有覆盖蒙版的情况下在背景图像之上设置背景颜色遮蔽/过渡？

Question

如果我有一个具有背景颜色的 CSS 元素:

.item-content {
  width:  100%;
  height: 100%;

  background-size: 100% 100%;
  border:2px solid #021a40;
  background-color: white;

}

但是在页面动态加载时我添加了一个背景 URL 属性(在这里也制作了 div):

var image = document.createElement("div");
image.className = "item-content";
image.style.backgroundImage = "url(" + imageSourceUrl + ")";

div 的背景图像显示在颜色之上。我可以为背景图像的不透明度设置动画，使其在悬停时逐渐消失:

$container.on('mouseenter', ".item-content", function (event) {
        var target = event.target;
        var $target = $(target);

        $(target).css('-webkit-transition', 'opacity 0.2s ease-in-out');
        $(target).css('transition', 'opacity 0.2s ease-in-out');
        $(target).css('opacity', '0');

    });

    $container.on('mouseleave', ".item-content", function (event) {
        var target = event.target;
        var $target = $(target);

        $(target).css('-webkit-transition', 'opacity 0.2s ease-in-out');
        $(target).css('transition', 'opacity 0.2s ease-in-out');
        $(target).css('opacity', '1');
    });

有没有办法设置颜色动画以遮盖图像并在悬停时将其设置为完全不透明(白色)？也许与 z-index 有关？

Answer 1

Is there a way to animate the color to overshadow the image and animate it to full opacity (white) when hovered?

如果您不需要支持 IE/Edge，那么您可以使用 background-blend-mode属性。

^{注意:仅使用 Chrome 和 FireFox 进行了测试。}

示例片段:

var image = document.createElement("div");
image.className = "item-content";
image.style.backgroundImage = "url(http://lorempixel.com/200/200)";
document.getElementById('wrap').appendChild(image);

.item-content {
  width:  200px; height: 200px; border: 2px solid #021a40; 
  background-size: 100% 100%; background-color: white;
  background-blend-mode: color-burn;
  transition: background-color .5s;
}
.item-content:hover { background-color: transparent; }

<div id="wrap"></div>

示例 fiddle :https://jsfiddle.net/abhitalks/vh24a0wt/