使用CSS -webkit-transform时Chrome上的模糊文本 [英] Blurry text on Chrome when using CSS -webkit-transform

查看：121
本文介绍了使用CSS -webkit-transform时Chrome上的模糊文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 

  -webkit-transform：skew（-15deg，0deg）;

扭曲div，然后 

  -webkit-transform：skew（15deg，0deg）;

至 deskew 包含文本的子项。歪斜看起来很丑并且在谷歌Chrome浏览器中像素化，所以我使用 

  -webkit-backface-visibility：hidden;

使其看起来不错。现在容器倾斜得非常好，内部文字不纠结，但文字本身模糊又丑陋！ （问题只存在于使用-webkit的chrome中）



演示

任何想法如何使文本再次清晰？

HTML 

 < div class =mainBodyItemBox> 
< div class =mainBodyItemImage> 
< img src =http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg> 
< / div> 
< div class =mainBodyItemDecorator>< / div> 
< div class =mainBodyItemText> PEC Zwolle v FC格罗宁根门票
< br> < span class =mainBodyItemType>足球< / span> 
< span class =mainBodyItemTime>< strong> 2014年4月4日< / strong> | 21：00< /跨度> 
< / div> 
< / div>

CSS 

  .mainBodyItemBox {
 background-color：＃f5f5f5; 
 display：inline-block; 
 font-family：Arial; 
 font-size：12px; 
 height：80px; 
 width：365px; 
 border-top：1px solid #ffffff; 
 border-bottom：1px solid＃c9c9c9; 
 margin-left：25px; 
 margin-top：10px; 
 transform：skew（-10deg，0deg）; 
 -webkit-transform：skew（-10deg，0deg）; 
 -moz-transform：skew（-10deg，0deg）; 
 -o-transform：skew（-10deg，0deg）; 
 -ms-transform：skew（-10deg，0deg）; 
 overflow：hidden; 
 -webkit-backface-visibility：hidden; 
} 
 .mainBodyItemImage {
 height：100％; 
 width：125px; 
 float：left; 
 overflow：hidden; 
} 
 .mainBodyItemDecorator {
 float：right; 
身高：100％; 
 width：10px; 
 background：rgb（30，143，30）; 
 background：url（data：image / svg + xml; 
ase64，PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJod ... EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +）; 
 background：-moz-linear-gradient（top，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
背景：-webkit渐变（线性，左上角，左下角，颜色停止（0％，rgba（30,143,30,1）），停止颜色（100％，rgba（71,209） ，21,1）））; 
 background：-webkit-linear-gradient（top，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
 background：-o-linear-gradient（top，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
 background：-ms-linear-gradient（top，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
背景：线性梯度（至底部，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃1e8f1e'，endColorstr ='＃47d115'，GradientType = 0）; 
} 
 .mainBodyItemText {
 color：＃323d50; 
 font-size：15px; 
身高：100％; 
 margin-left：125px; 
 padding-left：15px; 
 padding-top：5px; 
 transform：skew（10deg，0deg）; 
 -webkit-transform：skew（10deg，0deg）; 
 -moz-transform：skew（10deg，0deg）; 
 -o-transform：skew（10deg，0deg）; 
 -ms-transform：skew（10deg，0deg）; 
} 
 .mainBodyItemType {
 color：＃9aa7af; 
 font-size：10px; 
 margin-top：0px; 
} 
 .mainBodyItemTime {
 font-size：12px; 
 margin-top：0px; 
位置：绝对; 
 bottom：10px; 
 left：15px; 
}


解决方案

我不确定这会是一个固定模糊文本的可行解决方案，但我创建了一些似乎可以避免该问题的方法。



我使用的技巧是封装所有需要 transform：skew（-10deg，0deg）在一个容器中，并将该容器完全放置在文本后面。这样，文本不会受到任何转换，因此不需要进行去偏移。我尝试以不同的方式分离文本，但仅仅靠近转换的元素仍然导致文本模糊。



我创建了2个演示， 这一个 保留了原始HTML和 这一个 使用一些更清晰和更具语义的东西。这是后者，我也包括下面的代码。



HTML 

 <物品> 
<节> 
< h1> PEC兹沃勒v FC格罗宁根门票< / h1> 
< p>足球< / p> 
< time>< strong> 2014年4月4日< / strong> | 21：00< /时间> 
< / section> 
<预计> 
< img src =http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg/>< b>< / b> 
< / aside> 
< / article>

CSS 

 文章，不包括{
 font-size：12px; 
 height：80px; 
 width：365px; 
} 
 
 article {
 display：inline-block; 
 font-family：Arial; 
职位：亲属; 
 margin-left：25px; 
 margin-top：10px; 
} 
在外{
 position：absolute; 
 z-index：-1; 
 top：0; 
剩下：0; 
背景颜色：＃f5f5f5; 
 border-top：1px solid #ffffff; 
 border-bottom：1px solid＃c9c9c9; 
 transform：skew（-10deg，0deg）; 
 -webkit-transform：skew（-10deg，0deg）; 
 -moz-transform：skew（-10deg，0deg）; 
 -o-transform：skew（-10deg，0deg）; 
 -ms-transform：skew（-10deg，0deg）; 
 -webkit-backface-visibility：hidden; 
} 
 img {
 height：100％; 
 width：125px; 
} 
预留b {
右：0; 
 top：0; 
位置：绝对; 
身高：100％; 
 width：10px; 
 background：rgb（30，143，30）; 
 background：url（data：image / svg + xml; 
ase64，PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJod ... EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +）; 
 background：-moz-linear-gradient（top，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
背景：-webkit渐变（线性，左上角，左下角，颜色停止（0％，rgba（30,143,30,1）），停止颜色（100％，rgba（71,209） ，21,1）））; 
 background：-webkit-linear-gradient（top，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
 background：-o-linear-gradient（top，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
 background：-ms-linear-gradient（top，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
背景：线性梯度（至底部，rgba（30,143,30,1）0％，rgba（71,209,21,1）100％）; 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃1e8f1e'，endColorstr ='＃47d115'，GradientType = 0）; 
} 
部分{
颜色：＃323d50; 
身高：100％; 
 margin-left：140px; 
} 
 section h1 {
 font-size：15px; 
 font-weight：normal; 
 margin：5px 0 0; 
} 
部分p {
颜色：＃9aa7af; 
 font-size：10px; 
 margin：5px 0; 
} 
时间{
 font-size：12px; 
}


I'm using 

-webkit-transform: skew(-15deg, 0deg);

to skew a div, and then 

-webkit-transform: skew(15deg, 0deg);

to deskew the text-containing child. The skewing looks ugly and pixlated in google chrome, so I use

-webkit-backface-visibility: hidden;

to make it look OK. Now the container is skewed very nice and the inside text is "unskewed" but the text itself is blurry and ugly! (problem only exists only in chrome who uses -webkit)

Demo

Any ideas how to make the text clear again?

HTML

<div class="mainBodyItemBox">
    <div class="mainBodyItemImage">
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg">
    </div>
    <div class="mainBodyItemDecorator"></div>
    <div class="mainBodyItemText">PEC Zwolle v FC Groningen Tickets
        <br> <span class="mainBodyItemType">Football</span>
 <span class="mainBodyItemTime"><strong>04 Apr 2014</strong> | 21:00</span>
    </div>
</div>

CSS

.mainBodyItemBox {
    background-color: #f5f5f5;
    display: inline-block;
    font-family: Arial;
    font-size: 12px;
    height: 80px;
    width: 365px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #c9c9c9;
    margin-left: 25px;
    margin-top: 10px;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}
.mainBodyItemImage {
    height: 100%;
    width: 125px;
    float: left;
    overflow: hidden;
}
.mainBodyItemDecorator {
    float: right;
    height: 100%;
    width: 10px;
    background: rgb(30, 143, 30);
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 143, 30, 1)), color-stop(100%, rgba(71, 209, 21, 1)));
    background: -webkit-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: -o-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: -ms-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: linear-gradient(to bottom, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e8f1e', endColorstr='#47d115', GradientType=0);
}
.mainBodyItemText {
    color: #323d50;
    font-size: 15px;
    height: 100%;
    margin-left: 125px;
    padding-left: 15px;
    padding-top: 5px;
    transform: skew(10deg, 0deg);
    -webkit-transform: skew(10deg, 0deg);
    -moz-transform: skew(10deg, 0deg);
    -o-transform: skew(10deg, 0deg);
    -ms-transform: skew(10deg, 0deg);
}
.mainBodyItemType {
    color: #9aa7af;
    font-size: 10px;
    margin-top: 0px;
}
.mainBodyItemTime {
    font-size: 12px;
    margin-top: 0px;
    position: absolute;
    bottom: 10px;
    left: 15px;
}

解决方案

I am not sure this will be a viable solution for fixing blurry text but I have created something that seems to avoid the problem.

The trick I use is to encapsulate all elements that require the transform: skew(-10deg, 0deg) in a container and absolutely position the container behind the text. That way, the text is not subject to any transformation and therefore does not need to be deskewed. I did try separating the text in a different way but the mere proximity to a transformed element was still resulting in blurry text.

I have created 2 demos, this one retains your original HTML and this one using something a bit cleaner and more semantic. It is the latter that I have also included the code for below.

HTML

<article>
    <section>
        <h1>PEC Zwolle v FC Groningen Tickets</h1>
        <p>Football</p>
        <time><strong>04 Apr 2014</strong> | 21:00</time>
    </section>
    <aside>
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg" /><b></b>
    </aside>
</article>

CSS 

article, aside {
    font-size: 12px;
    height: 80px;
    width: 365px;
}

article {
    display: inline-block;
    font-family: Arial;
    position:relative;
    margin-left: 25px;
    margin-top: 10px;
}
aside {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    background-color: #f5f5f5;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #c9c9c9;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    -webkit-backface-visibility: hidden;
}
img {
    height: 100%;
    width: 125px;
}
aside b {
    right:0;
    top:0;
    position:absolute;
    height: 100%;
    width: 10px;
    background: rgb(30, 143, 30);
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 143, 30, 1)), color-stop(100%, rgba(71, 209, 21, 1)));
    background: -webkit-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: -o-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: -ms-linear-gradient(top, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    background: linear-gradient(to bottom, rgba(30, 143, 30, 1) 0%, rgba(71, 209, 21, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e8f1e', endColorstr='#47d115', GradientType=0);
}
section {
    color: #323d50;
    height: 100%;
    margin-left:140px;
}
section h1 {
    font-size:15px;
    font-weight:normal;
    margin:5px 0 0;
}
section p {
    color: #9aa7af;
    font-size: 10px;
    margin: 5px 0;
}
time {
    font-size: 12px;
}

这篇关于使用CSS -webkit-transform时Chrome上的模糊文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆