span 元素中的背景图像与另一个元素背景图像重叠答案

【问题标题】：background image in span element is overlapping another element background imagespan 元素中的背景图像与另一个元素背景图像重叠
【发布时间】：2018-04-23 13:37:16
【问题描述】：

span 元素中的背景图像与另一个元素背景图像重叠

background-color: inherit;
backface-visibility: hidden;

我已经给出了这两个属性以防止出现问题。但有时我的网页会出现问题。

.iconImage {
background-image: url(images/svg/S_TL_CATALOG.svg);
margin-left: -18px;
width: 36px;
height: 36px;
width: 36px;
margin: auto;
display: inline-block;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
left: 50%;
background-color: inherit;
backface-visibility: hidden;
}

帮我解决这个问题。谢谢

<div> // listed images for tools icon
   <span></span> //background image1 .. this is static image
   <span></span> //background image2 ..  coming images are dynamically adding images by drag and drop 
   ---------
</div>

这是我的 html 格式。刷新我的网页后，首先加载背景图像 2，然后加载下一个图像 2 的背景图像 1 与图像 1 重叠。

鼠标悬停在当时的两张图片上也是重叠的。任何 CSS 属性都可以解决这个问题

【问题讨论】：

粘贴您的完整代码
能否也包含您的 HTML？谢谢
请考虑为您的问题添加更多代码示例
请检查我的html格式
取决于图片大小和网速

标签： css

【解决方案1】：

background-blend-mode: screen;
backface-visibility: hidden;

将此css属性赋予元素

【讨论】：

【解决方案2】：

首先，如果您发布更详细的代码会有所帮助。

可能是显示问题.. 尝试改变显示值：

display: block;

如果你想将 span 块元素并排显示，添加

float: left;

【讨论】：