html - CSS - 模糊文本/图像 - 变换 :skew

Question

由于以下原因，我的网站上出现模糊的文本和图像:

transform:skew(0.25rad)

这是我的 html:

<div class="one">
    <h3>TITLE</h3>
</div>

这是我的 CSS:

.one{
    background:#323232;
    box-sizing:border-box;
    transform: skew(-0.25rad);
    padding:3px 20px;
    border-radius:4px;
    margin:0 -7px;
}
.one h3{
    box-sizing:border-box;
    transform:skew(0.25rad);
    color:#ffc70e;
    font-size:20px;
    letter-spacing:0.8px;
}

Answer 1

使用 webkit 浏览器进行 2d 或 3d 转换后的“模糊文本”已经[多次讨论][1]。但在您的情况下，您只能在伪元素上应用转换，这样您的文本就不会受到 skew 属性的影响。

它还允许您在标记中只使用一个标签:

@import url(http://fonts.googleapis.com/css?family=Oswald);
body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}

.parent {
    width: 300px;
    overflow: hidden;
    padding-left: 5%;
    position:relative;
}

.parent::before {
    content :'';
    position:absolute;
    top:0;left:0;
    width:100%; height:100%;
    background: rgba(90,190,230,0.9);
    transform-origin:0 0;
    transform:skew(-10deg);
    z-index:-1;
}

<div class="parent">
    Hello
</div>