文章分类 Classification
css解决图片失真
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2014-11-02 阅读次数: 1822 查看权限: 游客查看
css解决图片失真
css image-rendering属性用于浏览器如何处理图片呈现。IE下使用-ms-interpolation-mode，在IE7下只支持图片不支持透明，且默认值为"nearest-neighbor"(底质量)，而IE8默认值是"bicubic"(高质量)，IE9以上此属性已经过时。
 |
|
|
| 75% | 100% | 150% |
|
|
|
|
| 经过处理 | 原始图片 | 经过处理 |
img.img {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
以上比较适合矢量图，如果是位图放大将会出现毛边，如果想去除毛边可写：
img.high {
-ms-interpolation-mode:bicubic; /* IE 7+ */
image-rendering: optimizeQuality; /* Fx, (Gecko 1.9.2) */
}
关键词: css,图片失真 编辑时间: 2014-11-02 19:55:40
0
高兴
0
支持
0
搞笑
0
不解
0
谎言
0
枪稿
0
震惊
0
无奈
0
无聊
0
反对
0
愤怒
100%(1)
0%(0)
中搜索：
中搜索：
- 暂无评论
文章图片 article Pictrue
网友评论