如何在没有覆盖蒙版的背景图像之上有背景颜色的阴影/过渡？答案

【问题标题】：How to have a background-color overshadow/transition ontop of background-image without a overlay mask?如何在没有覆盖蒙版的背景图像之上有背景颜色的阴影/过渡？
【发布时间】：2015-12-30 08:09:56
【问题描述】：

如果我有一个具有背景颜色的 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 有关？

【问题讨论】：

你好，你所说的“阴影”o.o是什么意思
有没有办法让背景颜色显示在背景图片的前面，而不是相反？
仅当您在绝对或伪元素 :after 或 :before 上使用另一个 div 创建类似元素上方的掩码时
我需要找到一个解决方案，只涉及一个 div 元素，没有掩码。
但是你可以使用伪元素 :)

标签： javascript jquery html css

【解决方案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; }

&lt;div id="wrap"&gt;&lt;/div&gt;

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

【讨论】：

【解决方案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 指南。 Link.

【讨论】：