＼画像不要／CSSだけでドットフィルターをかける

動画の長さは短くしたくない！でも粗い画像は見栄えが悪いからやだ！というご要望。
ドットフィルターをかけて視覚的に粗さを隠すことで無事に納品できたので備忘！

DEMO
HTML
1. 画像の場合
2. 動画の場合
CSS

DEMO

ドットフィルターなし

ドットフィルターあり

HTML

画像の場合

<div class="dot_wrap">
  <img src="image.jpg" alt="画像">
</div>

動画の場合

<div class="dot_wrap">
  <video autoplay muted loop>
    <source src="video.mp4" type="video/mp4">
      お使いのブラウザは動画再生に対応していません。
  </video>
</div>

CSS

.dot_wrap {
  position: relative;
 display: inline-block;
}
.dot_wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4); //ドットの背景色を半透明の白色に
  ackground-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 20%, transparent 20%);
  background-size: 3px 3px; //ドットの繰り返しサイズを3px x 3pxに
  opacity: 0.7;
  pointer-events: none;
}