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

Question

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

我看过一些关于对角线扫描线的教程，但一直找不到这样的东西。我将如何在 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 Edge”）目前仅作为独立安装程序提供，微软尚未积极推动。因此，您网站的用户此时使用此版本的 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

这是使用伪元素的水平扫描线的一个非常简单的 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 度，但结果并不令人满意，所以我决定只发布水平线的答案。

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