使图像上的倾斜元素透明

Question

我已经尝试按照 Youtube 上的指南寻求帮助，我可以让它工作 - 有点。

我试图在一个部分中放置两个 div，其中顶部的用于放置图像，底部的用于放置文本等。

我想要的是，顶部的剃刀刀片在中间倾斜倾斜，这样图像就会流到底部 div。

我已经设法制作了倾斜元素并将它们放置在我想要的位置，但是当我将它们变成透明时，它们似乎消失了。

我的CSS:

.section_1 {
    height: 800px;
    width: auto;
    background: red;
}

.section_image {
    height: 400px;
    width: auto;
    background: green;
    position: relative;
    background-image: url(lolsovs.jpg);
}

.section_image::after, .section_image::before {
    position: absolute;
    content: '';
    width: 150px;
    height: 150px;
    background: green;
    z-index: 100;
    bottom: -1em;
}

.section_image::after {
    left: 50%;
    transform: skew(0, -20deg);
    z-index: 100;
}

.section_image::before {
    right: 50%;
    transform: skew(0, 20deg);
}

.section_text {
    background: purple;
    height: 400px;
    width: auto;
    z-index: -100;
}

对于所有这些东西，我还是个新手，所以请对我温柔些！

提前致谢！

Answer 1

but I when I turn them transparent, they seem to disappear.

这是合乎逻辑的，因为你让它们透明了。我建议您考虑另一种方法来实现这一目标。您可以简单地考虑一些线性渐变来为底部着色以在顶部具有此透明部分：

.image {
  height: 200px;
  background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}

.bottom {
  height:200px;
  margin-top:-50px;
  background:
  linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - 21px) 0/40px 50px no-repeat,
  linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + 20px) 0/40px 50px no-repeat,
  linear-gradient(purple,purple)100% 0/calc(50% - 40px) 50px no-repeat,
  linear-gradient(purple,purple)0 0/calc(50% - 40px) 50px no-repeat,
  linear-gradient(purple,purple)0 50px/100% 100% no-repeat;
}

<div class="image">
</div>
<div class="bottom">

</div>

为了更好地处理，您可以使用 CSS 变量来调整维度：

.image {
  height: 200px;
  background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}

.bottom {
  height:200px;
  margin-top:calc(-1 * var(--h,50px));
  background:
  linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
  linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
  linear-gradient(purple,purple)100% 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
  linear-gradient(purple,purple)0 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
  linear-gradient(purple,purple)0 var(--h,50px)/100% 100% no-repeat;
}

<div class="image">
</div>
<div class="bottom" style="--h:80px;--w:100px">

</div>

使图像上的倾斜元素透明

Making skewed elements on image transparent

html

css

css-transforms