Question

我有一个类{strong> boxright ，其背景图像为cave

我有一个按钮，它在onclick上指向功能ontop()，该功能将boxright的背景图像重置为图像cheetah

我希望猎豹出现在洞穴的顶部，即在 buttonclick上，我希望猎豹出现在洞穴的内部

如何实现？

function ontop()
{
var d=document.getElementById('a').style.backgroundImage="url(https://i.ibb.co/0DvMRj4/wcheetah.png)";
console.log(d);
}

.boxright {
  position: absolute;
  top: 48.3vh;
  left: 50.98vw;
  
  width: 14.0vw;
  height: 40.0vh;
  
  cursor:pointer;
  border:2px solid black;
  background-image:url(https://i.ibb.co/cYnc1Ky/kisspng-cave-euclidean-vector-illustration-vector-cave-5a7a360b205458-5617697615179586671324.png);
  background-repeat:no-repeat;
  background-size:cover;
  
  }

<div class="boxright" id="a"></div>
<button onclick="ontop();">place another image indide cave</button>

Answer 1

点击添加类到div中，然后在CSS中添加pseudo element和图片

function ontop()
{
   document.getElementById('a').classList.add('cheeteh');
}

.boxright {
  position: absolute;
  top: 48.3vh;
  left: 50.98vw;
  width: 14.0vw;
  height: 40.0vh;
  cursor:pointer;
  border:2px solid black;
  background-image:url(https://i.ibb.co/cYnc1Ky/kisspng-cave-euclidean-vector-illustration-vector-cave-5a7a360b205458-5617697615179586671324.png);
  background-repeat:no-repeat;
  background-size:cover;
  
  }
  .cheeteh:after{
    content: "";
    position: absolute;
    top: 50%;
    background-image: url(https://i.ibb.co/0DvMRj4/wcheetah.png);
    z-index: 4;
    width: 50%;
    height: 50%;
    background-size: 100% 100%;
  }

<div class="boxright" id="a"></div>
<button onclick="ontop();">place another image on top</button>

如何将图像放在按钮上的另一个图像中

1 个答案: