程序员经验分享-hwhale

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

2023-11-30

我有一个整页背景图像，我想在其上覆盖扫描线。我想复制我在二十世纪九十年代的数字艺术中看到的更传统的对角线扫描线效果，例如实现here在 Bootstrap 的模式掩码 5 中：

enter image description here

我看过一些关于对角线扫描线的教程，但一直找不到这样的东西。我将如何在 CSS 中实现它？


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

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;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

twitterbootstrap

scanline

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

  • 如何使用 Jquery 或 Javascript 更改原始字符串中的 HTML 属性？

    我想获取一堆锚标记并确保它们全部在新选项卡中打开 我知道我应该做这样的事情 a attr target blank 但问题是我试图修改的 HTML 位于字符串变量中 参见示例 我在一个字符串中有一堆原始 HTML 如下所示 var rawH

  • 在 Chrome 中显示输入 type=date-local 的秒数

    在谷歌浏览器中 如果我设置 type 输入的值datetime local包含秒的时间 其中秒值为 0 Chrome 决定不在输入中显示秒值 这意味着用户根本无法设置秒 例如 如果我将值设置为2013 10 24T20 36 01然后Chr

  • 如何使 HTML 表格“类似于 Excel”可编辑多个单元格，即同时复制粘贴功能？

    我需要我的 HTML 表是可编辑的 以便用户插入的数据可以发送到服务器 但是由于表的大小 50行 如果我引入 用户将不方便逐一插入数据点contenteditable属性如下 table tr td div editable div td

  • 通过 jquery 设置 type="file" 的值[重复]

    这个问题在这里已经有答案了 Note 下面的答案反映了 2009 年旧版浏览器的状态 现在 您实际上可以在 2017 年使用 JavaScript 动态 编程地设置文件输入元素的值 有关详细信息以及演示 请参阅此问题中的答案 如何以编程方式

  • 使用 css 模块如何定义全局类

    我正在使用 css 模块 但是我在组件中使用的一个用 JavaScript 附加推文的库向我的组件添加了一些元素 结构如下 div class user div div class tweet div 我现在想在组件的 css 模块中设置这

  • YouTube iframe 嵌入 - 全屏

    我有一个嵌入网页的表单 填写完表格后 将使用 iframe 嵌入显示 YouTube 视频 当我进入 YouTube 视频的全屏模式时 什么也没有发生 嵌套 iframe 的全屏是否受到父 iframe 尺寸的限制 在当前的 YouTube

  • 让浏览器缓存我的动态 PHP 样式表

    我想在 PHP 文件 styles php 中创建一个样式表 以便样式表变得动态 具体取决于请求的用户 对于每个单独的用户来说 样式表是不变的 因此应该缓存在他的客户端浏览器上 我读过 您可以通过设置内容类型和缓存控制等标头来实现此目的 但

  • 如何使 superfish 下拉菜单响应式？

    我正在使用带有骨架框架的 superfish 下拉菜单 我希望它也能在手机上运行 默认情况下 它显示下拉项目 但它将鼠标悬停在其下方的项目上 我想以某种方式拥有它 以便它将父项推到它下面 有什么解决办法吗 这是一个更好的答案 我能够将 Su

  • 三星 Galaxy S5 媒体查询

    我做了一些搜索并尝试了一些不同的东西 但就我的一生而言 我似乎无法专门针对三星 Galaxy S5 我只是在网站上工作时尝试一些东西 但我尝试的任何东西似乎都没有针对特定设备 这是我到目前为止所尝试过的 media only screen

  • Bootstrap 4 列和行产生不需要的填充[重复]

    这个问题在这里已经有答案了 我正在尝试使用 bootstrap 创建列和行来放置我的图像 但是在图像周围添加了太多的填充 这导致我的图像看起来不像设计 这就是我构建 HTML 的方式

  • 找不到模块：您尝试导入位于项目 src/ 目录之外的模块。不支持 src/ 之外的相对导入

    我刚刚开始React JS 但是我遇到了一个问题 尽管我进行了研究 但我无法得到结果 我尝试了很多方法 但我一直无法解决这个问题 你能帮忙吗 这是我在终端收到的错误 src App css node modules react script

  • 覆盖 Bootstrap 表格边框折叠样式

    引导程序有一个table border collapse collapse border spacing 0 风格 我想覆盖它 所以我创建了一个类并将其应用到有问题的表 table FormGroupContainer border col

  • CSS问题-水平滚动条隐藏内容

    我对此有一个问题 因为它给了我滚动条 但高度保持不变 因此文本被滚动条覆盖 td class messages div style border 0px padding 0px width 100 background color 66C2

  • border-radius 在 safari 下失败（丑陋的剪辑）

    有人知道 Safari 中以下 错误 的解决方法吗 当我使用border radius在 CSS3 中创建圆角边框 它在 Safari FF 等上工作得很好 但是 当边框颜色是背景颜色时 您可以看到容器背景与边框重叠 你可以在这里尝试一下

  • 如何在块元素之间添加垂直间距，但不添加顶部和底部

    假设我有一堆 P LI 或 DIV 元素 它们之间没有任何内容 我想控制它们之间的垂直间距 这样它们就不会贴得那么紧 但我不想添加任何顶部和底部空间 因为这是由父元素处理的 我不需要更多 有没有一种适用于所有块元素的简单方法 假设我有这样的

  • 如何在CSS网格系统中偏移div列

    有谁知道抵消前两个div位于侧行且具有类的 scol 3 12偏移量为offset 6 12 and offset 9 12位于我的网格系统的右侧jsFiddle http jsfiddle net c6R6t CSS body font

  • 是否可以将选择框中的文本居中？

    我试过这个 http jsfiddle net ilyaD KGcC3 http jsfiddle net ilyaD KGcC3 HTML

  • 如何在GEB中选择内部元素的文本？

    我有以下场景 div ul class select2 results style width 400px li class select2 results dept 0 select2 result select2 result sele

  • CSS：100% 宽度和背景？

    在我的页面中 有 2 3 个部分的宽度和背景为 100 当我全屏打开它时 一切正常 但当屏幕小于 960px 本节内容的宽度 时 背景图像不是整个页面 右侧的瞬间隐藏在没有背景的地方 它是白色的 你可以在这里明白我的意思 http mico

  • 在 Safari for Lion (OS X 10.7) 中设置滚动条颜色

    Lion 中的新滚动条似乎会根据 body 元素的背景颜色调整 Safari 中的颜色 有没有办法手动设置滚动条是深色还是浅色 我知道有 webkit CSS 选项来设置滚动条的样式 这实际上早于新的 Lion 滚动条 我使用该方法的唯一问

随机推荐

  • 为什么indexOf 不能在IE8 上工作？

    下面的函数在 Opera Firefox 和 Chrome 上运行良好 然而 在 IE8 中却失败了if allowed indexOf ext 1 1 part 有谁知道为什么 有没有明显的错误 function CheckMe var

  • 在 MS Access 中将包含多个值的多行连接成单行

    我正在尝试创建简单的需求管理数据库 基本上我有如下两张表 Contract requirements 有 2 列 CR ReqID Description reqCR1 Contract req description 1 reqCR2 C

  • 为什么 HTML/JSP 页面需要 DOCTYPE？

    为什么我们在 HTML JSP 页面中需要 doctype 页面似乎没有它就可以工作 Zeldman wrote 根据 HTML 和 XHTML 标准 DOCTYPE 文档类型 的缩写 声明 通知验证者 您正在使用哪个版本的 X HTML

  • NativeScript WebView加载src文档中的本地资源

    我正在加载本地 html 文件作为 NativeScript WebView 组件的 src html 文件中包含引用 javascript 文件的脚本标签 这些文件也是本地资源 捆绑在应用程序中 html 文件可以正常加载到 WebVie

  • Node.JS 服务器发送事件：在 res.end() 后路由继续运行，导致 ERR_STREAM_WRITE_AFTER_END 错误

    我正在开始使用服务器发送事件 SSE 因为我的 Web 应用程序需要从服务器接收实时更新 它不需要向服务器发送任何内容 因此选择 SSE 而不是 Websockets 阅读了一些示例后 我有以下代码 在我的服务器上 在 src router

  • GSP页面中的递归

    我有一个域名 class Node String nodeId String label Node parent 在 GSP 页面中 我想从根开始并打印其所有子项 请注意 我引用了父项而不是子项 知道如何做到这一点吗 我很抱歉 但我是新人

  • 通过字符串名称获取属性值

    请考虑这个类 public static class Age public static readonly string F1 18 25 public static readonly string F2 26 35 public stat

  • 如何通过检查元素的值从 ArrayList 中删除元素？

    我有 ArrayList 我想从中删除具有特定值的元素 for eg ArrayList

  • sphinx 自动摘要：“无法导入 Child.model”（继承的实例属性）

    我在使用 sphinx 和自动摘要时遇到问题 显然 sphinx 无法记录继承的实例属性 由于某种原因 产生的错误是导入错误 蟒蛇代码 class Base Base class def init self kwargs Init self

  • 当机器人加入服务器时发送消息

    我想每次当机器人被邀请到服务器时发送一条消息 然后它应该写这样的内容 你好 这是我的不和谐机器人 到目前为止 我有这段代码 它不会产生任何错误 但也不会发送消息 bot event async def on server join ctx

  • 是否可以解决“为可变参数参数创建 T 的通用数组”编译器警告？

    这是相关代码的简化版本 一个泛型类使用另一个具有泛型类型参数的类 并且需要将泛型类型之一传递给具有可变参数参数的方法 class Assembler

  • Microsoft BotFramework-WebChat 滚动问题

    我正在使用微软 BotFramework WebChat 但我在让它正确滚动时遇到问题 通常 当机器人响应时 用户被迫手动滚动到聊天日志的底部 我找不到任何有关挂钩的文档 可以让我调用 API 来滚动它 有没有办法让聊天窗口自动滚动 HTM

  • C++ 中 int 的 ostringstream 问题

    我希望输出以下代码hello5 相反 它只输出hello 尝试将 int 输出到 似乎是一个问题ostringstream 当我直接输出相同的内容时cout我收到了预期的输入 在 Snow Leopard 上使用 XCode 3 2 Tha

  • 带复选框的 Javafx 8 Tableview 选择

    我已经设置了一个启用多选的表视图 并尝试将插入列中的复选框的侦听器附加到表的选择模型 checkBoxTableColumn setCellValueFactory cellData gt CheckBox checkBox new Che

  • java.lang.IndexOutOfBoundsException

    我使用 ArrayList 来存储关卡中每个矩形的 阴影 但是当我像这样迭代时 for int n 0 n lt shadows size n g2d fillPolygon shadows get n 0 g2d fillPolygon

  • SpeechToText 并运行 ACTION_CHECK_TTS_DATA 意图

    我已经实施了TextToSpeech完全按照中提到的集成这篇博文 在我将它添加到我的程序中后 它现在干扰了我的其他程序intents 例如 项目清单 用户启动应用程序 用户调用加载活动 用户选择要加载的文件 活动返回 fileanme 以在

  • Kubernetes 不将数据复制到已安装的卷中

    根据这里的文档 https docs docker com storage volumes 如果您启动一个创建新卷的容器 如上所述 并且该容器在要挂载的目录 例如上面的 app 中具有文件或目录 则该目录的内容将被复制到该卷中 然后容器安装

  • 在 PYTHON 中向文件添加时间戳

    我可以使用 os rename 重命名文件 没有任何问题 错误 但是当我尝试重命名一个文件并添加时间戳时 它会抛出 win3 错误或 win123 错误 尝试了所有组合但没有运气 任何人都可以帮忙 成功运行代码 usr bin python

  • 通过 Java 与 Apple 推送通知服务器进行 SSL 握手

    您好 我正在尝试使用 Java 向我的设备发送推送消息 但我在建立 ssl 连接时已经遇到问题了 这是到目前为止的代码 KeyStore keyStore KeyStore getInstance PKCS12 InputStream ke

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

    我有一个整页背景图像 我想在其上覆盖扫描线 我想复制我在二十世纪九十年代的数字艺术中看到的更传统的对角线扫描线效果 例如实现here在 Bootstrap 的模式掩码 5 中 我看过一些关于对角线扫描线的教程 但一直找不到这样的东西 我将如

热门标签