HTML 5 文件加载图像作为背景图像

2024-01-14

是否可以通过 HTML 5 文件 API 加载图像并使用 javascript / jquery 将其设为 css 背景图像?如果可能的话,是如何做到的?


dronus 在评论部分发布了这个链接,给了我一个很好的答案:sveinbjorn.org/dataurls_css http://sveinbjorn.org/dataurls_css

您只需执行以下操作即可将图像数据用于 css 背景图像: 这将在您创建新图像并填充后保存图像的 src 数据 并使用 FileReader() 填充数据

var imgFileData = $('#image').attr('src') 

现在您只需获取此 var 并将其设置为背景图像 url

$('#yourDiv).css({'background-image':'url(' + imgFileData + ')'});
$('#image').hide(); //optional

阅读链接以更好地了解这里发生的情况,再次感谢 dronus

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

HTML 5 文件加载图像作为背景图像 的相关文章

  • 选择移动 Web HTML5 框架 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 用于动态字符计数的 Jasmine 单元测试用例

    任何人都可以给我编写测试用例的例子来检查是否 jquery 和 jasmine 中调用 keyup 事件中的函数 我对 jquery 和 jasmine 相当陌生 所以对这些错误感到抱歉 当用户在输入字段中输入字符时 该程序显示剩余的字符数
  • Jquery在quote中设置引号

    我有这样的代码 input id id slice 0 1 br brand qnt to cart show 这产生了我 input id 02620 br FEBI BILSTEIN qnt to cart 但我需要看到类似的东西 in
  • 有没有一种简单的方法(工具?)来比较不同格式的图像像素?

    好吧 我现在已经用 java 编写了一个基本的无损 jpeg 连接器 但我想将它生成的文件与原始文件进行比较 我只能在十六进制编辑器中比较这么多 有谁知道一种简单的方法 基于软件或基于java 最好是软件 因为我现在不想再编码了 我可以比较
  • jQuery TableSorter 插件初始化时出错:无法读取未定义的属性“0”

    我想用 jQuery Plugin TableSorter 对我的表格进行排序 所以我得到这张表 table class zebra striped thead tr th Date th th Annonce th th Support
  • jQuery.getJSON:如何避免在每次刷新时请求 json 文件? (缓存)

    在此示例中 您可以看到生成的 HTML 列表 每次刷新时 脚本都会请求数据文件 ajax test json 并再次构建列表 生成的文件 ajax test json 被静态缓存 但是如何避免在每次刷新时请求此文件 source jquer
  • 文件比较的逻辑

    我试图编写一个用于文件比较的程序 例如 file1 1 2 3 4 5 file2 1 2 3 4 5 如果我逐行执行 我会得到 1 1 2 2 3 4 3 5 4 5 但是 事实是这些文件之间的唯一区别是 我想要得到这样的东西 1 1 2
  • 如何从 JavaScript 中计算 HTML 表格的渲染高度?

    调整窗口大小时 我需要知道表格有多大 以便我可以动态地很好地适应中间的所有其他内容 表格高度仅取决于动态加载的内容 如何在 JavaScript 中计算表格的渲染高度 您可以使用element offsetHeight https deve
  • 强制本地化图像或图像资产

    正如在这个问题中 如何强制 NSLocalizedString 使用特定语言 https stackoverflow com questions 1669645 how to force nslocalizedstring to use a
  • HTML 覆盖高度覆盖整个可见页面

    我有一个使用 AJAX 加载一些内容的网页 我想在加载过程中显示带有加载指示器的覆盖层 以便用户无法与页面的大部分内容交互 除了顶部的菜单 我正在使用 jQuery 和jQuery BlockUI 插件 http malsup com jq
  • jquery 通过 div 选择复选框

    我想知道 jQuery 中是否有一种方法可以在有人单击整个 div 层时选中 取消选中复选框 本质上就像有一个巨大的选择区域 有任何想法吗 这是一个例子 我试图使复选框周围可单击以切换单个复选框 几乎如此 fieldset div div
  • 具有行组的 JQuery 斑马条纹表

    我通常将斑马条纹表行设置为奇数 偶数 如下所示 效果很好 table tbody tr visible even this addClass even table tbody tr visible odd this addClass odd
  • 如何在 Bootstrap 3 中制作进度条动画?

    我正在尝试为 Bootstrap 进度条设置动画 但我不知道该怎么做 我得到了宽度的值但是console log bar width 返回宽度px但不是 如内联所示style width 90 我用代码重新创建了一个 bootply Boo
  • 使用 jquery 和 php 测试表单输入是否为 1 或 2 位整数

    我有一个表单 其中有五个字段全部设置为 maxlength 2 基本上 我希望唯一可以输入的值是一位或两位整数 因为在将值存储在数据库中之前对这些字段执行计算 是否有任何 jquery 不允许用户输入不是整数的值 另外 用 jquery 和
  • 点击问题:动态生成的链接不触发点击功能

    下面是两个代码片段 由于某种原因什么也没有发生 但来自同一个 JS 文件的其他 jQuery 函数在带有 UL 的页面上执行得很好 这是在盯着我看吗 ul class paganation li 1 li li a href 2 a li
  • 从 Firebase 实时数据库 + 存储加载图像

    我正在使用 Firebase 文档 react redux firebase 中的 create react app 创建类似汽车图片库的东西 图像信息存储在 Firebase 实时数据库中 但实际图像文件存储在 Firebase 存储中
  • 使用 jQuery 修改 HTML 表格的结构

    我有一个元素列表 X在以下示例中 显示在 HTML 表格的行或列中 从 HTML 代码的角度来看 我有 水平显示 table tr td A td td B td td C td tr table 或 垂直显示 table tr td A
  • 如何清除隐藏上的引导模式

    如何在关闭 隐藏 关闭时清除引导模式 我有以下模态定义
  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne
  • jQuery 覆盖默认验证错误消息显示(Css)弹出/工具提示等

    我试图用 div 而不是标签来覆盖默认的错误消息标签 我看过这个帖子 https stackoverflow com questions 309574 jquery validation how to not display errors

随机推荐

  • 带两个参数的 MVC6 属性路由

    我已经对此进行了查看 并且没有任何与 MVC6 taghelper 锚标记相关的内容与满足多个参数的替代 HttpGet 方法相关 当然 您可以向 MVC6 锚标记帮助器添加多个参数 但是如何使用属性路由处理带有两个参数的第二个选项 我有两
  • 崩溃并终止原因 0xdead10cc

    请问这起事故的原因是什么 Incident Identifier A176CFB8 6BB7 4515 A4A2 82D2B962E097 CrashReporter Key f02957b828fe4090389c1282ca8e3839
  • Windows Phone 7 上带有盐的 SHA1

    我现在花了一些时间研究如何使用盐将密码编码为 SHA1 这是我在网络应用程序部分使用的代码 但它不适用于电话环境 public class Password private string password private int salt
  • Python unicode:如何测试 unicode 字符串

    我有一个这样的脚本 Python26 coding utf 8 import sys import xlrd import xlwt argset set sys argv 1 import wb xlrd open workbook ex
  • groovy 中的 get 与 getProperty

    令我惊讶的是 根据groovy的文档 groovy可以使用 getProperty 方法来获取对象的属性 因此 当我想更改获取特殊对象属性的行为时 我使用类别类来重写 getProperty 方法 然而 它不起作用 最后 我发现groovy
  • Python SSL:证书验证失败

    我在连接时遇到错误www mydomain com在使用 Windows 8 1 的相当新的机器上使用 Python 2 7 12 错误是SSL CERTIFICATE VERIFY FAILED on the ssl sock conne
  • 分割数据框

    打印 df A B 0 10 1 30 2 50 3 20 4 10 5 30 A B 0 10 1 30 A B 2 50 A B 3 20 4 10 5 30 你可以使用pd cut https pandas pydata org pa
  • 如何使用 C# 使用 DomainName 获取 AD 中的 OU 名称列表?

    我想从 Active Directory 获取 OU 列表 我只有域名 我如何使用 C 实现这一目标 尝试这样的事情 connect to RootDSE to find default naming context DirectoryEn
  • javascript 对 HTML 元素进行就地排序 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 继续为javascript 对 HT
  • MULTIPART_FORM_DATA:找不到 public javax.ws.rs.core.Response 类型的参数的注入源

    我正在使用基于 Jersey 的 Restful 服务实现策略来构建一个用于上传文件的服务 我的服务类名称是 UploadFileService java 参见下面的代码 package com jerser service import
  • 如何以及何时使用“async”和“await”

    据我了解 主要的事情之一是async and await https learn microsoft com en us dotnet csharp async这样做的目的是使代码易于编写和阅读 但使用它们是否等于生成后台线程来执行长时间的
  • 使用 OpenCV 打开 USB 摄像头

    我想在 Linux Mint 18 3 上使用 C 语言的 OpenCV 打开 USB 摄像头 相机已插入并可与 Common Vision Blocks 的 SoftwareSuite 配合使用 来自命令lsusb我得到以下输出 Bus
  • 为什么要同时使用 os.path.abspath 和 os.path.realpath?

    在多个开源项目中 我见过人们这样做os path abspath os path realpath file 获取当前文件的绝对路径 然而 我发现os path abspath file and os path realpath file
  • 为什么表达式上的 static_cast 具有分布式作用?

    我需要取 2 个无符号 8 位值并减去它们 然后将该值添加到 32 位累加器 8 位减法可能会下溢 但没关系 unsigned int 下溢是已定义的行为 因此没有问题 我希望static cast
  • 为什么我的 CSS 代码不适用于我的 Html 页眉和页脚? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 需要一些帮助 陷入了非常关键的时刻 我必须在明天之前完成这项工作 但我的 CSS 代码不适用于页眉和页脚 而同一文件适用于其他内容 如字体系
  • jOOQ - 与嵌套子查询连接

    假设我想知道是谁写的CLRS在书中数据库 表BOOK AUTHOR带连接表BOOK AUTHOR SelectConditionStep
  • 如何在R语言中展开用户和环境变量?

    有什么方法可以扩展 R 中的波浪号和环境变量吗 例如 在Python中 您可以通过写出以下一组代码来获取它 import os os path expanduser r workspace return Users yourname r w
  • 条件编译的注意事项[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 什么时候进行条件编译是个好主意 什么
  • Vagrant ssh 连接到主机 127.0.0.1:2222 端口 22: 文件号错误

    每当我尝试连接到本地 Vagrant 时 运行时都会收到此错误ssh email protected cdn cgi l email protection 2222来自 Windows git bash ssh connect to hos
  • HTML 5 文件加载图像作为背景图像

    是否可以通过 HTML 5 文件 API 加载图像并使用 javascript jquery 将其设为 css 背景图像 如果可能的话 是如何做到的 dronus 在评论部分发布了这个链接 给了我一个很好的答案 sveinbjorn org