Question

我正在尝试在div内的内容上应用SkewY css3d变换蒙版。为此，我使用的外部div得到-3deg的偏斜，我有另一个div在相反的方向（3deg）有一个偏斜。

赋予溢出：隐藏到外部div以创建蒙版效果会导致内部div内部的内容（尤其是图像）失去其初始质量。很高兴没有让Chrome上的内容模糊，并保持掩码通过溢出。

以下是我目前使用的代码：

CSS：

.outer {
    -webkit-transform: skewY(-3deg);
    transform: skewY(-3deg);
    -webkit-transform-origin: 50% 51%;
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
}

.inner{
    -webkit-transform: skewY(3deg) translateY(-50%);
    transform: skewY(3deg) translateY(-50%);
    background-color: #595b5e;
    height: calc(100% + 130px);
    top: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
}

HTML：

<div class="outer">
    <div class="inner"><img src="highqualityimage.jpg" alt="" class=""><img src="" alt=""></img></div>
</div>

以及它正在做的事情的示例链接（尝试删除隐藏的溢出以查看差异）：http://codepen.io/guilanier/pen/bNMvmO

css转换溢出：隐藏导致Chrome中的内容模糊

0 个答案: