css点击网页显示图片

在网页设计中，有时需要点击某个元素来显示一张图片。这个功能可以通过CSS实现。以下是实现该功能的步骤：

HTML代码：
<div class="image">
  <img src="picture.jpg">
</div>
CSS代码：
.image {
  cursor: pointer;
  width: 200px;
  height: 200px;
  background: url('placeholder.jpg') no-repeat center center / cover;
}
.image:hover {
  background-image: none;
}
JavaScript代码：
let image = document.querySelector('.image');
image.addEventListener('click', function() {
  image.classList.toggle('active');
}
);
 

首先，在HTML中设置一个类名为“image”的div，其中包含一张图片。在CSS中，设置div的宽度、高度和背景图片（占位符）等属性。同时，设置鼠标光标变成手形指针，并在:hover状态下把背景图片去掉。

其次，在JavaScript中，通过DOM操作获取到“image”元素，监听该元素的click事件。当点击“image”元素时，“active”类将被添加到该元素中，从而将真实图片显示出来。

通过以上CSS和JavaScript代码，就可以实现点击网页显示图片的功能了。