logo标签列表

CSS缩放不会模糊但会出现像素化问题

csszooming
6
我想在CSS中使用缩放属性来处理图像，但不希望放大后的图像模糊，而是希望呈现像素化效果。如何实现这一点？ 编辑：如果必要的话，可以使用其他属性或其他语言。
我敢打赌，你不可能以跨浏览器的方式实现这一点，至少不能仅通过zoom属性来实现。 - user229044
有没有其他的方法可以做到这一点？也许用其他编程语言？ - Deniz Zoeteman
@user229044 你现在可以, CSS3成立于2015年 - undefined
3个回答
2

目前无法使用升频和指定浏览器应使用最近邻插值缩放，无论是在HTML图像、放大的HTML5画布、在画布上使用drawImage()绘制更大的图像，还是在SVG上放大图像。

这里有一个解决方案（为this related question编写），展示了如何通过在SVG中重新创建图像作为矩形来实现最近邻像素化的“缩放”：http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml

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

0
请不要发布只包含JSFiddle链接的答案，您的代码必须放在答案中，而不是外部代码托管平台上。 - undefined
@user229044 答案中已经包含了所有的代码，他只需要在他的CSS中添加image-rendering:pixelated来处理图片，或者添加到<body>中。演示只是因为他在问题中没有提供任何代码让我来补充。此外，如果需要更多解释，文档已经链接在那里，它并不是“仅包含JSFiddle链接”。 - undefined
0
你可能想尝试一个轻量级的jQuery插件，叫做Zoomoz。它支持缓动和本地动画等设置。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接