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

Question

我有一个整页的背景图片，我想覆盖扫描线。我想复制我从小在早期数字艺术中看到的更传统的对角线扫描线效果，例如在 Bootstrap 的图案掩码 5 中实现 here：

我看过一些关于对角线扫描线的教程，但找不到类似的东西。我将如何在 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;
}

Answer 2

试试这个代码：

.view {
    position: relative;
    overflow: hidden;
    cursor: default;
}
img{
  position: relative;
    display: block;
}
.view .mask{
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
  background: url(https://i.ibb.co/C0MjrsJ/05.png);
    background-attachment: fixed;
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
}

<div class="view" bis_skin_checked="1">
                <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
                <div class="mask pattern-5 flex-center" bis_skin_checked="1">
                    <p class="white-text">.pattern-5</p>
                </div>
            </div>

Answer 3

以下所有实现此目的的方法均由 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”）是 currently only available，它是 Microsoft 尚未积极推动的独立安装程序。因此，您网站的用户此时使用此版本的 Edge 的可能性极小，即使他们使用的是 Windows 10 并且是最新版本。

解决方案 2

这与 Bootstrap 在 pattern-mask-5 中使用的方法完全相同，虽然它适用于所有现代浏览器，但除了在标记中添加容器 <div> 之外，它还需要使用图像：

HTML：

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

CSS：

.bg-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(local/img.png); /* download the image here: https://i.ibb.co/C0MjrsJ/05.png and link to it */
}

解决方案 3

Temani here 发布的解决方案是迄今为止解决此问题的最干净、最跨浏览器的解决方案。

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

它使用 SVG，因此不需要任何外部图像，并且适用于所有现代浏览器。

Answer 4

这是一个使用伪元素的水平扫描线的非常简单的 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;    
}

代码笔here:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient