由于以下原因,我的网站上出现模糊的文本和图像:
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;
}
最佳答案
使用 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>
关于html - CSS - 模糊文本/图像 - 变换 :skew,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34785042/