Question

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格式。刷新我的网页背景image2后首先加载然后背景image1加载下一个image2与image1重叠。

鼠标悬停在那两个图像上也是重叠的。任何css属性都可以解决这个问题

Answer 1

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

也许是显示问题.. 尝试更改显示值：

display: block;

如果您想要显示彼此相邻的跨度块，请添加

float: left;

Answer 2

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

将此css属性赋予元素

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

2 个答案: