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进行测试。}

示例代码段

＆＃13;

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

＆＃13;

.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; }

＆＃13;

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

＆＃13;

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

Answer 2

您不能将z-index用于此目的。为堆叠HTML元素指定了z-index值。

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

请注意color可能是十六进制，rgb，rgba或hsl。另请注意，background-image的使用是CSS3，请参阅W3Schools指南。 Link

如何在没有叠加蒙版的背景图像上进行背景色阴影/过渡？

2 个答案: