如何在CSS中的背景图像上获取扫描线 [英] How to get scanlines over background image in CSS

问题描述

我有一张整页的背景图片，我想将扫描线覆盖在上面.我想复制在长篇小说的数字艺术中长大的传统对角线扫描线效果，例如已实现的

我看过一些关于对角线扫描线的教程，但是找不到类似的东西.我将如何在CSS中完成它?

解决方案

以下是使用多个背景的近似值:

  html {高度:100％;背景:径向渐变(#000 0.5px，透明0.5px)0 0/3px 3px，径向渐变(#000 0.5px，透明0.5px)1px 1px/3px 3px，径向渐变(#000 0.5px，透明0.5px)2px 2px/3px 3px，url(https://i.picsum.photos/id/102/800/800.jpg)中心/封面；}  

您可以与使用图像图案的以下内容进行比较

  html {高度:100％;背景:url(https://i.ibb.co/C0MjrsJ/05.png)，url(https://i.picsum.photos/id/102/800/800.jpg)中心/封面；}  

I have a full-page background image that I'd like to overlay scanlines over. I'm wanting to replicate the more traditional diagonal scanline effects that I grew up seeing in digital art of the noughties, such as implemented here in Bootstrap's pattern mask 5:

I've seen a few tutorials for diagonal scanlines, but haven't been able to find anything like this. How would I accomplish it in CSS?

解决方案

here is an approximation using multiple background:

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

You can compare with the below that use the image pattern

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

这篇关于如何在CSS中的背景图像上获取扫描线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！