translate3d出现了模糊解决方案|transform translate模糊

来源:未知 人浏览 2017.08.09

transform translate3d出现了字体或者图片模糊的情况,是因为元素的宽度或者高度数值不是偶数造成,transform: translate3d(-50%, -50%, 0);相当于宽高/2,当除以2的时候为小数,元素就会出现模糊!

所以把元素的宽高设置成偶数即可

.papa {
    position: fixed;
	top: 50%;
	left: 50%;
	width: 211px;
	height: 69px;
	-webkit-transform: translate3d(-50%, -50%, 0);
  	transform: translate3d(-50%, -50%, 0);
        z-index: 1000;
        /*模糊*/
}
.papa1 {
    position: fixed;
    top: 60%;
    left: 50%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    z-index: 1000;
    /*不模糊*/
}

transform浏览器支持详情

星期三
15年12月16日
热门板块
windows 10下载设计软件下载PhotoShop CC文章分享Portraiture磨皮win10安装教程
热门下载
Lightroom 5.2官方中文版下载下载(

Lightroom 5.2官方中文版下载下载(

下载
PhotoShop CC下载官方正版可激活版本

PhotoShop CC下载官方正版可激活版本

下载