如何在没有覆盖蒙版的情况下在背景图像的顶部有背景颜色的阴影/过渡？

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

有没有一种方法可以对颜色进行动画处理以使图像阴影化，并使其在悬浮时动画为完全不透明（白色）？

如果不需要支持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> 

小提琴示例： https : //jsfiddle.net/abhitalks/vh24a0wt/

Answer 2

您不能为此使用z-index 。 指定z-index值用于堆叠HTML元素。

在您的情况下，我建议您使用background-image: url(imagepath), linear-gradient(color, color) 。 在这里，您可以使用url和linear-gradient的顺序。

请注意， color可能是十六进制，rgb，rgba或hsl。 还要注意， background-image是CSS3，请参阅W3Schools指南。 链接 。