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

Question

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

中实现的 here

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

Answer 1

试试这个代码：

.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 2

这是一个非常简单的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

和此处的行之间的 space：

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

Codepen here:

我确实尝试将伪元素旋转 45 度，但结果并不令人满意，所以我决定 post 仅针对水平线的答案。

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

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 称之为 "New 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 发布的解决方案是迄今为止针对此问题的最简洁、最跨浏览器的解决方案。

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

这里是使用多重背景的近似值：

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

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

How to get scanlines over background image in CSS

html

css

twitter-bootstrap

scanline

解决方案 1

解决方案 2

解决方案 3