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制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
一些PHP写的小东西
2006/12/06 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
初识PHP中的Swoole
2016/04/05 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
JavaScript知识点整理
2015/12/09 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
js实现弹窗效果
2020/08/09 Javascript
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python的链表基础知识点
2020/09/13 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
中国文明网签名寄语
2014/01/18 职场文书
无毒社区工作方案
2014/05/23 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
西游降魔篇观后感
2015/06/15 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技