子元素作物父元素？

Question

我不知道该问题的标题。从我的设计师那里得到了这张图片：

我该如何做这样的事情？ 就像您看到的那样，在Midle中有一个按钮需要单击并且背景透明。在按钮周围，您会看到红色的全角父级。也许我的方法不好，也许可以用伪元素来完成，但我不知道怎么做。 请帮我...

这是我的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，但是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>