Child元素作物parent元素？

Question

我不知道给这个问题起什么标题。从我的设计师那里得到这张图片：

我怎样才能做出这样的东西？就像你看到的那样，中间有一个按钮需要可点击和背景 transparent。在按钮周围，您会看到红色全宽 parent。也许我的方法不好，也许可以用伪元素来完成，但我不知道怎么做。请帮助我...

这是我的 html 代码：

<div class="pdf">
    <div class="pdf-container">
        <h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
        <a href="#" class="pdfbutton"> stáhnout katalog</a>
    </div>
</div>

Answer 1

Support isn't fantastic, but mix-blend-mode 是实现所需外观的最简单方法。

.pdf {
  background: url('https://media.istockphoto.com/vectors/gear-wheel-vector-rendering-of-3d-wireframe-style-3d-view-layers-of-vector-id1003526726') 50% 10% no-repeat;
  text-align: center;
}

.nav {
  height: 60px;
  background-color: #313131;
  mix-blend-mode: multiply;
}

.pdf-container {
  padding: 30px;
  background-color: red;
  mix-blend-mode: multiply;
}

.pdfbutton{
  background: white;
  border-radius: 20px;
  display: inline-block;
  padding: 10px 20px;;
}

<div class="pdf">
  <div class="nav"></div>
  <div class="pdf-container">
    <h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
    <a href="#" class="pdfbutton"> stáhnout katalog</a>
  </div>
</div>

Child元素作物parent元素？

Child element crops parent element?

html

css

background-color

transparent