html - 将 div 的背景图片覆盖在通过 js 加载的图片上

Question

我正在尝试将 div 中的图像覆盖在<img>. 我现在的代码是：

    <div class="something">
        <img class="pp" src="get_pp()" />
        <div class="img1"></div>
    </div>

get_pp()是一个 Js 函数，它在页面加载之前给我 img url。我的CSS：

#pp {
   height: 50px;
   width: 50px; 
   top: 315px;
   left: 30px;
   position: absolute;
   display: block;
}   

#img1 {
   background-image: url("../images/img_name.png");
   height: 50px;
   width: 50px; 
   top: 315px;
   left: 30px;
   position: absolute;
   display: block;
   z-index:300;
}

不幸的是，设置 z-index 不起作用。任何帮助，将不胜感激！

Answer 1

Your error probably has something to do with the fact that you have your elements identified with class names in your HTML, but defined as IDs in your CSS.

Change CSS to:

.pp {
   height: 50px;
   width: 50px; 
   top: 315px;
   left: 30px;
   position: absolute;
   display: block;
}   

.img1 {
   background-image: url("../images/img_name.png");
   height: 50px;
   width: 50px; 
   top: 315px;
   left: 30px;
   position: absolute;
   display: block;
   z-index:300;
}

Try this for starters.

Answer 2

您使用 class 而不是 id 的第一件事

所以改变

.pp {
   height: 50px;
   width: 50px; 
   top: 315px;
   left: 30px;
   position: absolute;
   display: block;
}   

.img1 {
   background-image: url("../images/img_name.png");
   height: 50px;
   width: 50px; 
   top: 315px;
   left: 30px;
   position: absolute;
   display: block;
   z-index:300;
}

第二次在这里使用图像而不是 get_pp() 等。

演示在这里