Javascript 隐藏图像后面的内容

我正在尝试一个小的代码，它有一个以图像为背景的div，里面有一些文本

在这种情况下，当用户单击

div

时，背景应该变为白色（并且工作正常）。但最初，出现的文本应该在图像后面。更像是前景图像

这是一把小提琴

请让我知道我哪里出了问题，我怎样才能解决这个问题

---

感谢您，您可以通过最初将文本不透明度设置为0并使用相同的单击事件将其颜色更改为黑色来完成此操作

函数删除图像（）{
document.getElementById（“myClass”）.style.background=“白色”；
document.getElementById（“myClass”）.style.color=“黑色”；
}

.myClass{
背景：url（“https://cdn2.droom.in/photos/images/drm/super-cars.png");
高度：100px；
宽度：100px；
颜色：rgba（0,0,0,0）；
}

我是特克斯

您只需在单击时将文本的显示样式从“无”设置为其他任何内容

<div class="myClass" id="myClass" onclick="remove_image()">
   <div class="myText" id="myText"> This is texr</div> 
</div>

function remove_image() {
  document.getElementById("myClass").style.background = "white";
  document.getElementById("myText").style.display = "inline";
}

.myClass {
  background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
  height: 100px;
  width: 100px
}
.myText {
  display: none;
}

我是特克斯
函数remove_image（）{
document.getElementById（“myClass”）.style.background=“白色”；
document.getElementById（“myText”）.style.display=“inline”；
}
.myClass{
背景：url（“https://cdn2.droom.in/photos/images/drm/super-cars.png");
高度：100px；
宽度：100px
}
.myText{
显示：无；
}

请看这里：

我想要图片后面的文字

您可以为此使用

z-index

属性。但是文本需要用新元素包装

在这个示例中，我使用js添加了一个具有所需新属性的类

函数删除图像（）{
document.getElementById（“myClass”）.classList.add（“active”）；
}

.myClass{
背景：url（“https://cdn2.droom.in/photos/images/drm/super-cars.png");
高度：100px；
宽度：100px
}
.myClass.active{
背景：白色；
}
跨度{
z指数：-1；
位置：相对位置；
}
.myClass.active span{
z指数：1；
}

这是文本

函数删除图像（）{
document.getElementById（“myClass”）.style.background=“白色”；
document.getElementsByTagName（'span'）[0]。style.display='block'
}

.myClass{
背景：url（“https://cdn2.droom.in/photos/images/drm/super-cars.png");
高度：100px；
宽度：100px；
}

我是特克斯

您想知道如何在init上隐藏文本吗？