Html 如何在CSS中获得背景图像上的扫描线

我有一整页的背景图像，我想覆盖扫描线。我想复制我从小在21世纪数字艺术中看到的更传统的对角线扫描线效果，比如Bootstrap的图案蒙版5：

我看过一些关于对角线扫描线的教程，但没有找到类似的。我如何在CSS中实现它？

试试下面的代码：

.view{
位置：相对位置；
溢出：隐藏；
游标：默认值；
}
img{
位置：相对位置；
显示：块；
}
.视图.掩码{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
宽度：100%；
身高：100%；
溢出：隐藏；
背景附件：固定；
背景：url(https://i.ibb.co/C0MjrsJ/05.png);
背景附件：固定；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
身高：100%；
}

.pattern-5

下面是一个非常简单的css解决方案，用于使用伪元素的水平扫描线：

.scanlines::after {
  content:'';
  position: absolute;
  width:100%;
  height: 100%;
  background-image: linear-gradient(rgba(39, 43, 46, 0.6) 1px, transparent 1px);
  background-size: 2px 2px;
  background-attachment: fixed;
}

这将创建一个与根图像元素大小匹配的覆盖。然后我们创建扫描线——实际上是两条线（一条是深色半透明的，一条是透明的）——并重复它。您可以在此处调整线条的颜色和高度：

background-image: linear-gradient(rgba(39, 43, 46, 0.6) 1px

这两条线之间的距离：

background-size: 2px 2px;

在我的例子中，根元素如下所示：

/* The background/header image */

.scanlines {   
  background-image: url('https://www.telegraph.co.uk/content/dam/Travel/2018/January/sydney-best-GETTY.jpg?imwidth=1400');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width:100vw;
  height:100vh;
  position: relative;    
}

代码笔：

我确实尝试过将伪元素旋转45度，但结果并不令人满意，所以我决定只发布水平线的答案

---

以下所有实现此目的的方法都是由Temani提供的，我只是将它们集中在一个地方，以便根据您的需要进行选择

解决方案1 此解决方案完全复制Firefox的效果，但只能近似于Chrome和Edge的效果，因为它们不支持亚像素值：

html {
  height:100%;
  /* fallback for Firefox */
  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;
  /*Chrome and the latest version of Edge*/
  background:
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 0   0  /3px 3px,
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 1px 1px/3px 3px,
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 2px 2px/3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

它适用于所有现代版本的Firefox和Chrome，但仅适用于最新版本的Edge

请注意，Edge的最新版本（基于Chromium的版本，Microsoft称之为“新的Microsoft Edge”）是一个独立的安装程序，尚未由Microsoft主动推出。因此，您站点的用户此时不太可能使用此版本的Edge，即使他们使用的是Windows 10和最新版本

解决方案2 这与Bootstrap在

pattern-mask-5

中使用的方法完全相同，尽管它适用于所有现代浏览器，但除了向标记添加容器

外，还需要使用图像：

HTML:

<div class="bg-container">
</div>

解决方案3 Temani发布的解决方案是迄今为止最干净、最跨浏览器的解决方案

html {
  height:100%;
  background:
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 0   0  /3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 1px 1px/3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 2px 2px/3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

html{
身高：100%；
背景：
url（'data:image/svg+xml；utf8'，）0 0/3px 3px，
url（'data:image/svg+xml；utf8'，）1px 1px/3px 3px，
url（'data:image/svg+xml；utf8'，）2px2px/3px3px，
网址(https://i.picsum.photos/id/102/800/800.jpg)中心/盖；
}

---

它使用SVG，因此不需要任何外部图像，可在所有现代浏览器上使用。

以下是使用多个背景的近似方法：

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，
网址(https://i.picsum.photos/id/102/800/800.jpg)中心/盖；
}

请注意，您的代码是一个简单的副本/从这里过去的代码：投票赞成从我应该拥有的网站中提取代码，但我添加了我自己的最低可行答案，该答案经过测试，可以在没有从该网站复制所有不必要的内容的情况下工作。做得很好，完全在纯CSS中复制图像版本，无需更改标记-谢谢。

html {
  height:100%;
  background:
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 0   0  /3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 1px 1px/3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 2px 2px/3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}