css 点击图片后覆盖一张图片

CSS中可以很方便地使用:hover伪类来实现在鼠标悬停时改变图片的效果，但如果要让图片变化在点击之后保持，则需要使用一些JavaScript实现。

css 点击图片后覆盖一张图片

一种常见的实现方式是通过JavaScript在页面中动态添加一个div，并将被点击的图片设置为这个div的背景图。以下是实现这个效果的HTML和CSS代码：

<div id="overlay"></div>
<img src="original-image.jpg" onclick="showOverlay(this);">

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0.5);
  z-index: 999;
  display: none;
}

#overlay.show {
  display: block;
}

这里我们使用了一个id为overlay的div来覆盖在点击的图片上方，设置了它的宽度和高度为100%，背景为半透明黑色，并将z-index设置为999以确保它处于最顶层。初始时这个div是隐藏的，当图片被点击后，调用showOverlay函数展示overlay。

function showOverlay(img) {
  var overlay = document.getElementById('overlay');
  overlay.style.backgroundImage = 'url(' + img.src + ')';
  overlay.classList.add('show');
}

showOverlay函数获取id为overlay的div，并将被点击的图片的src作为它的background-image属性值，最后通过给overlay添加show类来显示它。

这种方式的优点在于不需要改变HTML结构，可以用于任何图片。缺点只是需要使用JavaScript实现，并且可能在一些低端设备上表现不好。

css 点击图片后覆盖一张图片

相关文章