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

}

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


関連するタグ

CSS

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

プロジェクトでは主にユーザーヒアリング、進行管理、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

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

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

お問い合わせはこちらから