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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 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操作类
2006/11/16 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php函数与传递参数实例分析
2014/11/15 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
jQuery基础框架浅入剖析
2012/12/27 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
快速了解python leveldb
2018/01/18 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
浅谈python可视化包Bokeh
2018/02/07 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
python dict如何定义
2020/09/02 Python
煤矿安全承诺书
2014/05/22 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
教学反思怎么写
2016/02/24 职场文书
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript