Question

我正在尝试将图像叠加在<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;
}

首先尝试这个。

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（）等。

Demo here

覆盖通过js加载的图像div的背景图像

2 个答案: