html - 如何在CSS中获取背景图像上的扫描线

Question

我有一张整页背景图片，我想在上面叠加扫描线。我想复制我从小在 20 世纪数字艺术中看到的更传统的对 Angular 线扫描线效果，例如已实现的 here在 Bootstrap 的模式掩码 5 中:

我看过一些关于对 Angular 线扫描线的教程，但没能找到这样的教程。我将如何在 CSS 中完成它？

Answer 1

这是一个使用多重背景的近似值:

html {
  height:100%;
  background:
    radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

你可以和下面使用图像模式的对比

html {
  height:100%;
  background:
    url(https://i.ibb.co/C0MjrsJ/05.png),
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}