CSS 缩放不是模糊而是像素化

2024-04-16

我想在图像的 CSS 中使用缩放属性,但不希望对放大的图像产生模糊效果,而是像素化。我怎样才能实现这个目标?

编辑:如果需要,可以使用其他属性或其他语言。


您(当前)不能使用放大并指定浏览器应使用最近邻缩放,无论是 HTML 图像、放大的 HTML5 画布还是使用drawImage()在画布上绘制更大的图像,也不能在 SVG 上放大图像。

这是一个解决方案(写给这个相关问题 https://stackoverflow.com/questions/4875850/how-to-create-a-pixelized-svg-image-from-a-bitmap/4879849)展示如何通过在 SVG 中将图像重新创建为矩形,使用最近邻像素化来“缩放”图像:http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml

这是另一个解决方案,展示了如何使用 HTML5 Canvas 实现相同的效果(在画布上绘制矩形以进行缩放):
http://phrogz.net/tmp/canvas_image_zoom.html http://phrogz.net/tmp/canvas_image_zoom.html

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

CSS 缩放不是模糊而是像素化 的相关文章

随机推荐

  • ngClass 可以在 Angular 2 中使用三元运算符吗?

    在 Angular 1 中 下面的代码运行良好 div 但是当我尝试在 Angular 2 中做类似的事情时 它不起作用 我已经添加了directives NgClass div 我应该如何在 Angular 2 中编写 谢谢 编辑 这是我
  • 错误 1148 MySQL 此 MySQL 版本不允许使用的命令

    我正在使用MySQLLOAD DATA LOCAL INFILE命令 我收到此错误 PDOException SQLSTATE 42000 Syntax error or access violation 1148 The used com
  • 浏览器上的连续语音识别,例如“ok google”或“hey siri”

    我正在做一个 POC 我的要求是我想实现这样的功能OK google or Hey Siri在浏览器上 我正在使用 Chrome 浏览器Web speech api 我注意到我无法继续识别 因为它会在一段时间后自动终止 而且我知道出于安全考
  • NodeJS Websocket如何在服务器重新启动时重新连接

    在 Node js 中我使用网络套接字 ws https github com websockets ws用于 WebSocket 连接 以下是客户端的代码 假设我们正在连接的服务器套接字宕机了一分钟 close 事件将会触发 但是每当服务
  • 在 C++ 和 Java 中声明对象

    我已经使用c 有一段时间了 我正在学习java 在java中声明对象让我很困惑 在java中我们写 myclass myobject new myclass myobject mymethod 和c 中的这段代码一样吗 myclass my
  • D3JS:将时间序列数据中缺失的时间值插入为空

    我正在尝试使用 D3 绘制时间序列数据 但遇到了缺少时间戳和宽度调整的问题 数据通常每 5 分钟发布一次 但由于某种原因有时可能没有时间戳 例如 上午 11 45 之后 下一个时间戳将为 23 45 我想在中间有一个间隙 而不是在该时间段内
  • 正则表达式允许除空格或所有空格之外的任何内容? [复制]

    这个问题在这里已经有答案了 我想允许任何事情和一切 除了空白条目 NULL 零字符 无论你想怎么称呼它 以及任何长度的空格之外 都不应该允许 如果我使用某种语言进行编码 这本质上就是我使用 TRIM 函数所做的事情 但我需要仅使用正则表达式
  • 在 PHP 中读取 REST API 响应

    我正在尝试阅读 Raven SEO Tools API 它是一个 REST API 目前当我通过 Web 浏览器请求 URL 时 它以 XML 或 JSON 如果我选择 的形式提供数据备份 将他们的服务器的响应获取到我自己的 PHP 脚本中
  • 如何在 Perl 中同时迭代多个列表?

    我需要创建一个文本文件 aptest s 我可以用它来读入另一个程序 我使用 Perl 是因为我有一个很大的列表需要处理 我的代码如下 没有给出所需的输出 在代码和实际输出之后显示 任何帮助 将不胜感激 usr bin perl w chd
  • Ruby on Rails:如何使用迁移向现有列添加非空约束?

    在我的 Rails 3 2 应用程序中 我的数据库中有一堆表 但我忘记添加一些非空约束 如何编写将 not null 添加到现有列的迁移 您还可以使用更改列空 http api rubyonrails org classes ActiveR
  • 如何使用反射设置属性值

    我有一个用属性装饰的类 DataEntity MESSAGE STAGING EnableCaching true CacheTimeout 43200 对于某些要求 我想改变这个值MESSAGE STAGING在运行时到Test Mess
  • Eclipse 中是否有键盘快捷键可以折叠当前方法/块?

    问题说明了一切 我在 Eclipse v3 4 中打开了折叠功能 并且不必单击页面装订线中的小 我想知道是否有一个键盘快捷键 折叠当前方法 快速浏览一下 Eclipse 中的菜单和其他内容不会显示它的菜单项 所以也许您无法做到这一点 Any
  • SEO URL 重写 ASP.NET

    我已经有一个 ASP NET 网站 我想更改我的网站 使其对 SEO 网址更加友好 我想改变前任这个网站 www mydomain aspx articleID 5 到 www mydomain article learningURLrew
  • WiX 无法正确渲染图像

    我正在尝试编写一个自定义 WiX 对话框 作为其工作流程的一部分 它会根据某些条件显示错误图像 然而 WiX 似乎忽略了我的尺寸并按其感觉合适的方式显示 这是我的代码
  • 一起使用 MongoDB 和 Neo4j

    我正在开始一个新项目 我正在考虑使用 MongoDB 作为文档存储工具 使用 Neo4j 作为映射文档之间关系的机制 然后我想通过 REST API 公开查询结果 人们会说这样做的优点和缺点是什么 是否有更好的方法可以使用不同的 NoSQL
  • “无法从...初始化默认 wsdl”——为什么?

    My pom xml包含以下内容 用于自动为具有以下指定 WSDL 的工作 Web 服务生成客户端
  • 在bash中生成不重复的随机数序列

    今晚我一直在忙着学习 bash 我一直在尝试创建一个随机数字序列 该序列使用一个范围内的所有数字 并且每个数字只使用一次 因此 输入 1 5 的范围将输出 4 3 5 2 1 或 2 5 1 3 4 等 我在这件事上陷入了困境 Thanks
  • WordPress - 在侧边栏“最近的帖子”中显示特定类别的帖子

    如何使 WP 侧边栏中的 最近帖子 仅显示特定类别的帖子 使用 Otto 的 php 代码小部件之一制作您自己的最近帖子小部件可能是最简单的http wordpress org extend plugins php code widget
  • 如何使用 python 处理 dbus 接口的属性?

    我即将致力于实施mpris http mpris org 但目前我不知道如何使用 python dbus 读取 写入 dbus 接口属性 有这方面的例子吗 终于得到了答案 dbus service method dbus PROPERTIE
  • CSS 缩放不是模糊而是像素化

    我想在图像的 CSS 中使用缩放属性 但不希望对放大的图像产生模糊效果 而是像素化 我怎样才能实现这个目标 编辑 如果需要 可以使用其他属性或其他语言 您 当前 不能使用放大并指定浏览器应使用最近邻缩放 无论是 HTML 图像 放大的 HT