Question

我在HTML（我使用bootstrap）中有一个偏斜的块，如下所示：

.skewed {
  -webkit-transform: skew(0, -3.279deg);
  -moz-transform: skew(0, -3.279deg);
  -o-transform: skew(0, -3.279deg);
  transform: skew(0, -3.279deg);
  -ms-transform: skew(0, -3.279deg);
}

正如我所注意到的，在Chrome中它看起来像素化，所以我将-webkit-backface-visibility: hidden添加到.skewed类。现在问题已经消失了 - 它不再像素化了。

然后又出现了另一个重大问题：这个街区内的文字模糊不清......

请看一下JS Fiddle。

Answer 1

老问题，但也许这帮助无论谁偶然看到这个，解决这个问题只需添加背面可见性：初始;到最后，参见示例

.bar {
    background: red;
    color: #F5DDBB;
    box-shadow: 0 2px 5px #aaa;
    padding-top: 45px;
    padding-bottom: 45px;
    -webkit-transform: skew(0, -3.279deg);
    -moz-transform: skew(0, -3.279deg);
    -o-transform: skew(0, -3.279deg);
    transform: skew(0, -3.279deg);
    -ms-transform: skew(0, -3.279deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: initial;
}

.bar .row {
     -webkit-transform: skew(0, 3.279deg);
    -moz-transform: skew(0, 3.279deg);
    -ms-transform: skew(0, 3.279deg);
    -o-transform: skew(0, 3.279deg);
    transform: skew(0, 3.279deg);
}

<div class="container-fluid bar">
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center">Welcome to the website</h2>
            <br/>
            <p class="text-center">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.
            </p>
        </div>
    </div>
</div>

Chrome bug：偏斜元素看起来像素化

1 个答案: