如何在内容和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且具有不透明度/ rgba值的重叠图层肯定不会实现所需的输出。

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