实现

实现上述过程重点是点击图片后，图片消失，谜底出现。我们通过position让图片脱离文档流，让图片‘盖住’谜底，在点击的时候利用display让图片消失，谜底出现。

布局。首先我们画出包裹灯谜的div，将其设置成flex弹性布局，将里面的三个div进行布局，并找到一种图片当做背景。

   .wrapper {
        width: 800px;
        height: 300px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: gainsboro;
        background: url(./images/background.jpg);
        background-size: 100%;
      }
      .item {
        width: 180px;
        height: 220px;
        border: 1px solid red;
        box-shadow: 0 1px 20px red;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }

    <div class="wrapper">
      <div class="item">
        <img src="./images/lamp.jpg" alt="" />
        <span class="riddle">早说晚不说(打一字)</span>
      </div>
      <div class="item">
        <img src="./images/lamp.jpg" alt="" />
        <span class="riddle">超级好牙刷(打一成语)</span>
      </div>
      <div class="item">
        <img src="./images/lamp.jpg" alt="" />
        <span class="riddle">高台对映月分明(打一字)</span>
      </div>
    </div>

接下来就是对图片进行设置，通过position:absolute达到盖住谜底的效果，这时候一定要将父元素position设置为relative,不然图片会根据body进行定位。

   img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        position: absolute;
      }
      .riddle {
        color: red;
        font-weight: bold;
      }

将谜底文字设置为红色加粗。

事件。点击时候图片消失，那我们给图片添加点击事件，利用document.getElementsByTagName('img')获取图片dom元素集，然后循环添加点击事件，在点击图片时添加display:none。获取的dom集是伪数组，所以我们不能使用数组循环方法，比如forEach,用for进行循环添加。

    for (let i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
          imgs[i].style.display = 'none';
        };
      }

这样我们就得到了猜灯谜了小游戏啦。

总结

不知道上面三个灯谜，大家都猜出了嘛。新的一年，祝大家元宵快乐！

[兔了个兔]——兔年元宵猜灯谜

实现

总结