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

但是当我把它们变得透明时，它们似乎消失了。

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

.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>

使图像上的倾斜元素透明

1 个答案: