css中手机点击图片生成大图

CSS在网页设计中起着举足轻重的作用，其中一个功能就是可以通过点击手机上的图片，生成并展示大图。下面就来介绍一下这个实现方法。

.img-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
}

.img-wrapper:after {
  content: "";
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 999;
}

.img-wrapper.active:after {
  display: block;
}

.img-wrapper.active img {
  opacity: .3;
} 

首先，需要为图片创建一个容器，可以使用div或者其他标签。本例中使用了一个class为img-wrapper的div来做容器。设置position为relative，overflow为hidden，可以使得图片在这个容器内部显示，并将超出容器的部分隐藏。

接下来，在img标签中设置width和height为100%，能够让图片充满整个容器。 而在img-wrapper容器中使用伪元素:after来生成一个黑色的半透明遮罩层，并设置z-index值为999，让其在最上层显示。

为了能够使用点击事件来显示大图，需要在.img-wrapper元素的CSS中添加以下监听代码：

.img-wrapper {
  cursor: pointer;
}

.img-wrapper.active {
  cursor: default;
} 

这个代码块会让鼠标指针变成手形，让用户知道该图片可以点击，同时在添加active类名之后，可以让光标恢复到正常状态。

最后，为元素添加点击事件代码，用来触发遮罩层的显示和隐藏：

$(".img-wrapper").on("click", function() {
  $(this).toggleClass("active");
}); 

当用户点击了.img-wrapper容器时，toggleClass方法会在点击的时候切换其active类名。这就会让遮罩层出现或消失，同时要注意，在点击完毕后需要让光标恢复到正常状态，这个可以在上述的CSS代码中实现。