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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 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 Pear 安装及使用
2009/03/19 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
PHP中SESSION过期设置
2021/03/09 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
详解vue在项目中使用百度地图
2019/03/26 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
实践Vim配置python开发环境
2018/07/02 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
中层竞聘演讲稿
2014/01/09 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
微观世界观后感
2015/06/10 职场文书
儿子满月酒致辞
2015/07/29 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android