一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS3 translate导致字体模糊怎么办 CSS3 translate导致字体模糊解决方法

时间:2019-09-02 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下CSS3 translate导致字体模糊解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

使用了translate会导致字体模糊。

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

为了垂直居中,使用了  transform: translateY(-50%) 和 top:50% ,然后出现了字体模糊的问题。

现解决方法如下:

1、网上有人说 translate里的参数用固定值不用百分比,但是没办法啊,我就要用,下一个!

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

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

看element.style 我增加了偶数宽高,自己慢慢试,让右边那个490x290 没有小数点出现就好了!

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

完美解决!

热门栏目