我用CSS transform rotate以及scale创建了一个八边形的样式,如下所示:
然而,在Mac系统上使用Chrome 52.0.2743.116 (64-bit)浏览器时,这张图片会变得模糊。相反,在Firefox上这张图片看起来很清晰。
我已经尝试了各种解决方案,例如backface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;,但是图片仍然模糊不清。
是否有任何Webkit特定规则可以解决这个问题?
然而,在Mac系统上使用Chrome 52.0.2743.116 (64-bit)浏览器时,这张图片会变得模糊。相反,在Firefox上这张图片看起来很清晰。
我已经尝试了各种解决方案,例如backface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;,但是图片仍然模糊不清。
是否有任何Webkit特定规则可以解决这个问题?
div.octagon {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-o-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
margin-top: 1em;
margin-bottom: 1em;
}
div.octagon > * {
position: relative;
overflow: hidden;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: transparent;
border: 4px solid;
margin: 0;
background-color: black;
}
div.octagon > *:after {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -3px,
* but if the border were 5px, then it'd be -5px.
*/
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
border: inherit;
}
div.octagon > * > img {
display: block;
-webkit-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-moz-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-ms-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-o-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
transform: rotate(-67.5deg) scale(1.1) translateZ(0);
max-width: 100%;
height: auto;
image-rendering: -webkit-optimize-contrast;
}
.col-6 {
display: inline-block;
width: 49%;
}
.col-6 > .octagon {
width: 100%;
}
<div class="col-6">
<div class="octagon">
<p>
<img src="https://placeimg.com/300/300/people" width="500" height="500" />
</p>
</div>
</div>
<div class="col-6">
<img src="https://placeimg.com/300/300/people" width="300" height="300" />
</div>
transform: perspective(1px) rotate(45deg);
吗?或者在父元素上设置transform-style: preserve-3d;
呢? - Asonstransform
也会变得模糊。相反,请使用更大的原始图像并缩小它,就不会出现这个问题。 - Asons