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

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;
  }

}

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

前の記事 次の記事

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートすることができます。

ご連絡おまちしています!

10万円からホームページ作成サービス

フレームワークをベースに柔軟なカスタマイズ&低価格で作成します。

サービスを詳しく見たい方へ