- 综合排序
- 最热优先
- 最新优先
- 来自专栏练小习的专栏
渲染放大的图片image-rendering笔记
image-rendering: pixelated，控制浏览器如何渲染放大的图片，比如图像的自然尺寸为100×100像素，但网页指定其尺寸不为100*100像素时，关闭浏览器标准的平滑缩放（通常为双线性内插法 Syntax image-rendering: auto; //使用默认算法，即将图片色彩进行平滑缩放，不同的浏览器采用的算法不一 image-rendering: crisp-edges; // * Global values */ image-rendering: inherit; image-rendering: initial; image-rendering: unset; 代码实例 ： image-rendering: auto; 78% ? image-rendering: pixelated; 78% ? 100% ? 138% ? image-rendering: crisp-edges; 78% ?
2.1K70发布于 2017-12-29 - 来自专栏Coco的专栏
不借助 Javascript，利用 SVG 快速构建马赛克效果
核心是利用了 CSS 中一个很有意思的属性 -- image-rendering，它可以用于设置图像缩放算法。 何为 image-rendering？ 语法比较简单： { image-rendering: auto; // 默认值，使用双线性（bilinear）算法进行重新采样（高质量） image-rendering 让照片更“平滑” image-rendering: crisp-edges; // 使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放 image-rendering: pixelated 30x30" /> img { width: 300px; height: 300px; image-rendering: pixelated } image-rendering 我们来做个对比，直接给原图设置 image-rendering: pixelated： 直接给原图设置 image-rendering: pixelated 只会让图片变得更加有锯齿感，而不会直接产生马赛克的效果
1K20编辑于 2022-04-28 - 来自专栏Coco的专栏
现代图片性能优化及体验优化指南 - 缩放精细化展示及避免布局偏移、拉伸
CodePen Demo -- Object position 使用 image-rendering 设置图片缩放算法 相对于上面几个新特性，image-rendering 会更为冷门。 这个时候，我们就可以利用 image-rendering，设置图片在缩放状态下的展示算法。 image-rendering 在特定的场景下，能够起到奇效。 改变图片缩放算法，这里我们试一下 image-rendering: pixelated： .img { image-rendering: pixelated; } 效果变化，如下图所示： 可以看到 CodePen Demo -- QrCode Image-rendering demo 来看看 image-rendering 的几个取值： image-rendering: auto：自 Gecko image-rendering: smooth：使用能最大化图像客观观感的算法来缩放图像 image-rendering: high-quality：与 smooth 相同，但更倾向于高质量的缩放。
1.8K60编辑于 2023-03-01 - 来自专栏fastmock
css 缩小图片后，图片变模糊的解决办法
解决办法：样式表中加入以下样式即可解决 img { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode
2.6K10编辑于 2022-07-13 - 来自专栏前端开发
CSS 像素化技术应用指南及组件封装实现方案
CSS像素化技术使用指南与组件封装方案一、基础使用方法（一）直接应用于元素/* 应用于单个图片 */.pixel-image { image-rendering: pixelated; filter : blur(0) contrast(1.5) brightness(1.2);}/* 应用于整个容器 */.pixel-container { image-rendering: pixelated; }, height: { type: Number, default: null } }}</script><style scoped>.pixelated { image-rendering tailwind.config.jsmodule.exports = { theme: { extend: { utilities: { 'pixelated': { 'image-rendering : pixelated; /* 标准语法 */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -webkit-optimize-contrast
34510编辑于 2025-05-27 - 来自专栏蚂蚁开源社区
【代码艺术】带视觉特效的js密码强度检测开源库
height: 100%; position: absolute; top: 0; left: 0; } canvas { image-rendering : optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast ; image-rendering: -o-crisp-edges; image-rendering: crisp-edges; -ms-interpolation-mode
3.5K21发布于 2019-09-12 - 来自专栏无人打理的花园
[pixlate] 用 canvas 转像素画
参见 CSS image-rendering 属性。 顺着这个属性，我爬到了 image-rendering 的文档页 — 哦！原来 image 也可以拿来这么处理啊。
2K20发布于 2019-08-04 - 来自专栏Coco的专栏
现代图片性能优化及体验优化指南
CodePen Demo -- Object position 使用 image-rendering 设置图片缩放算法 相对于上面几个新特性，image-rendering 会更为冷门。 这个时候，我们就可以利用 image-rendering，设置图片在缩放状态下的展示算法。 image-rendering 在特定的场景下，能够起到奇效。 改变图片缩放算法，这里我们试一下 image-rendering: pixelated： .img { image-rendering: pixelated; } 效果变化，如下图所示： 可以看到 CodePen Demo -- QrCode Image-rendering demo 来看看 image-rendering 的几个取值： image-rendering: auto：自 Gecko image-rendering: smooth：使用能最大化图像客观观感的算法来缩放图像 image-rendering: high-quality：与 smooth 相同，但更倾向于高质量的缩放。
2.6K30编辑于 2023-04-01 - 来自专栏全栈技术
HTML5汽车赛道飙车游戏免费源码下载
padding: 0px; width: 100%; background-color:black; } canvas { -ms-touch-action: none; image-rendering : -o-crisp-edges; image-rendering: optimize-contrast; -ms-interpolation-mode
2.1K10发布于 2021-08-23 - 来自专栏HarmonyOS开发-ArkUI-X
【HarmonyOS Next】ArkUI-X休闲益智接水果【进阶】
华为设备专属优化/* 抗锯齿优化 */.fruit-img { image-rendering: -webkit-optimize-contrast; /* iOS */ image-rendering
22900编辑于 2025-06-28 - 来自专栏大前端（横向跨端 & 纵向全栈）
CSS 3.0图片像素放大马赛克特效
left: 0; width: 100%; height: 100%; /* 关键属性 */ image-rendering
1.6K30发布于 2020-11-26 - 来自专栏前端达人
22 个鲜为人知的 CSS 高招让你技高一筹
/* check support for `grid` and `image-rendering` properties */ @supports (display: grid) { section { display: grid; } } @supports (image-rendering) { img { image-rendering: pixelated;
1.3K30发布于 2021-09-08 - 来自专栏【腾讯云开发者】
修十年Bug修成Commiter？鹅厂工程师的Chromium社区贡献之旅
the TextureLayer for WebGPU"（https://chromium-review.googlesource.com/c/chromium/src/+/5211706） Fix image-rendering pixelated fails for bitmaprenderer（https://chromium-review.googlesource.com/c/chromium/src/+/5237798） Fix image-rendering
90410编辑于 2024-05-29 - 来自专栏我在本科期间写的文章
❤️创意网页：创意动态画布~缤纷移动涂鸦~图片彩色打码
{ display: block; width: 100%; height: 100%; border: 1px solid black; image-rendering
47010编辑于 2024-03-20 - 来自专栏前端Q
15 个你不知道的 CSS 属性
img { image-rendering: pixelated; } 8. overscroll-behavior: 过度滚动行为确定用户过度滚动元素时的行为，允许开发人员进一步自定义滚动体验
55410编辑于 2024-05-31 - 来自专栏bit哲学院
PyGobject（一百）Cairo系列——cairo.Surface实现图片倒影
This method provides a stride value that will respect all alignment requirements of the accelerated image-rendering
98320发布于 2021-01-14 - 来自专栏前端达人
分享100 个鲜为人知的 CSS 技巧
img { image-rendering: pixelated; } 91.
2.3K10编辑于 2024-03-11 - 来自专栏趣谈前端
分享CodePen上6个酷炫demo特效
radius), transparent calc(var(--radius) + var(--blur)), transparent ); } #bg_pixelate { image-rendering
73310编辑于 2024-01-09 - 来自专栏信数据得永生
【信仰充值中心】Pale Moon 29 正式版更新日志
代码 更新了字体，以适配多种族多职业的 emoji 显示 修复了剪贴板的溢出问题，它们可能被错误地渲染 已添加 smooth，high-quality 以及 pixelated 的值进 CSS 属性 image-rendering
1.9K50编辑于 2022-04-02
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号