CSS3 translate致使字体样式模糊不清的案例编码

日期:2021-03-17 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

今天顾客意见反馈,发现 应用了 translate会致使字体样式模糊不清。

.media-body-box{
      @media all and (min-width: 992px){
        position: absolute;
        width: 100%;
        top:50%;
        transform: translateY(⑸0%);
        right: 0;
        padding: 30px;
      }
    }

以便竖直垂直居中,应用了  transform: translateY(⑸0%) 和 top:50% ,随后出現了字体样式模糊不清的难题。

现处理方式以下:

1、在网上有人说 translate里的主要参数用固定不动值无需百分比,可是没法啊,我就要用,下1个!

2、在网上有人说 将宽高设以便偶数,嗯,试了下。

这个图是本来的,有小数点:


 

看element.style 我提升了偶数宽高,自身渐渐地试,让右侧那个490x290 沒有小数点出現就行了!

.media-body-box{
      @media all and (min-width: 992px){
        position: absolute;
        width: 100%;
        top:50%;
        transform: translateY(⑸0%);
        right: 0;
        padding: 30px;
        width: 550px;
        height: 350px;
      }
    }

 完善处理!

总结

以上所述是网编给大伙儿详细介绍的CSS3 translate致使字体样式模糊不清,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!