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

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

您的错误可能与以下事实有关:您的元素在 HTML 中使用类名标识，但在 CSS 中定义为 ID。

将 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;
}

初学者试试这个。