CSS画像や動画の上にドットを被せる方法

こんにちは。ましじめの田村です。

画像の上にドットを被せる方法です。
画像を全体に伸ばして表示する場合や動画に被せるなど活用出来ると思います。

<div class="is-layer-dot">
  <img src="https://masizime.com/user/pages/01.home/03._callout/003.jpg">
</div>

.is-layer-dot {
  position: relative;
  &:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, .4);
    background-image: radial-gradient(#000 20%, transparent 0), radial-gradient(#000 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 4px 4px;
  }

}

画像の上にドットを被せる場合に参考にしてみてください。

---