Дочерний элемент обрезает родительский элемент? - PullRequest
Новая
       27

Дочерний элемент обрезает родительский элемент?

0 голосов
/ 17 октября 2018

Я не знаю, какое название дать на этот вопрос.Получил от моего дизайнера это изображение:

enter image description here

Как я могу сделать что-то подобное?Как вы видите, в середине есть кнопка, которая должна быть кликабельной и иметь прозрачный фон.Вокруг кнопки вы видите красный полноразмерный родитель.Может быть, мой подход не очень хорош, может быть, это можно сделать с помощью псевдоэлементов, но я не знаю как.Пожалуйста, помогите мне ...

Это мой 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>

1 Ответ

0 голосов
/ 17 октября 2018

Поддержка не фантастическая , но 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>
...