html - 如何在 content 和 content::before 上使用不透明度而不重叠

Question

我使用 bootstrap 3 作为我的网格框架和 CSS 来创建一个具有一个倾斜/倾斜边缘的半透明区域，但由于分层不透明度，我的元素遇到了问题。

期望是中心是倾斜的，但右侧仍然是正方形。

有没有更好的方法来实现这一点？请参阅 jsfiddle 以获取工作示例。

<div class="container">
    <div class="row marketing-text">
        <div class="col-sm-6">
            <!-- Intentionally empty, jsfiddle was giving me issues with the offset -->
        </div>
        <div class="col-sm-6 right">
            <h5 class="uppercase">Header Text</h5>
            <p>Long Text Input</p>
        </div>
    </div>
</div>
<style>
.row.marketing-text .right {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: rgba(255, 139, 0, 0.5);
}
.row.marketing-text .right::before {
    content: " ";
    transform-origin: top;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 139, 0, 0.5);
}
</style>

https://jsfiddle.net/aq9Laaew/255707/

Answer 1

引用您的示例，具有 background-color 和 opacity/rgba 值的重叠层肯定不会获得所需的输出。

更好的方法是使用 :before 和 :after 伪元素