CSS3 translate导致字体模糊的实例代码


Posted in HTML / CSS onAugust 30, 2019

今日客户反馈,发现 使用了 translate会导致字体模糊。

.media-body-box{
      @media all and (min-width: 992px){
        position: absolute;
        width: 100%;
        top:50%;
        transform: translateY(-50%);
        right: 0;
        padding: 30px;
      }
    }

为了垂直居中,使用了  transform: translateY(-50%) 和 top:50% ,然后出现了字体模糊的问题。

现解决方法如下:

1、网上有人说 translate里的参数用固定值不用百分比,但是没办法啊,我就要用,下一个!

2、网上有人说 将宽高设为了偶数,嗯,试了下。

这个图是原本的,有小数点:

CSS3 translate导致字体模糊的实例代码
 

看element.style 我增加了偶数宽高,自己慢慢试,让右边那个490x290 没有小数点出现就好了!

CSS3 translate导致字体模糊的实例代码

.media-body-box{
      @media all and (min-width: 992px){
        position: absolute;
        width: 100%;
        top:50%;
        transform: translateY(-50%);
        right: 0;
        padding: 30px;
        width: 550px;
        height: 350px;
      }
    }

 完美解决!

总结

以上所述是小编给大家介绍的CSS3 translate导致字体模糊,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 #HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 #HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 #HTML / CSS
移动端rem布局的两种实现方法
Jan 03 #HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 #HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 #HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 #HTML / CSS
You might like
基于mysql的论坛(1)
2006/10/09 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
js自动下载文件到本地的实现代码
2013/04/28 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
pow在python中的含义及用法
2019/07/11 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
django正续或者倒序查库实例
2020/05/19 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
2014年三八妇女节活动方案
2014/02/28 职场文书
学习雷锋倡议书
2014/04/15 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
西游降魔篇观后感
2015/06/15 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
python垃圾回收机制原理分析
2022/04/13 Python
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技