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实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
点评山进PR-D3L三波段收音机
2021/03/02 无线电
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php 生成短网址原理及代码
2014/01/23 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
两个php日期控制类实例
2014/12/09 PHP
php session的锁和并发
2016/01/22 PHP
jQuery 表格插件整理
2010/04/27 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python将多个excel表格合并为一个表格
2021/02/22 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
python操作kafka实践的示例代码
2019/06/19 Python
PyTorch安装与基本使用详解
2020/08/31 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
视图的作用
2014/12/19 面试题
教师师德师风自我剖析材料
2014/09/29 职场文书
销售经理岗位职责
2015/01/31 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书