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中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP连接access数据库
2015/03/27 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
PHP7修改的函数
2021/03/09 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python中有趣在__call__函数
2015/06/21 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
幼儿园春游活动方案
2014/01/19 职场文书
美术教师自我鉴定
2014/02/12 职场文书
网络技术专业推荐信
2014/02/20 职场文书
销售经理岗位职责
2014/03/16 职场文书
调查研究项目计划书
2014/04/29 职场文书
母亲节演讲稿
2014/05/27 职场文书
红白喜事主持词
2015/07/06 职场文书
趣味运动会加油词
2015/07/18 职场文书
Python闭包的定义和使用方法
2022/04/11 Python