Блог

Главная - Вопросы по программированию - Маска элемента на градиентном фоне, обеспечивающая его адаптивность

Маска элемента на градиентном фоне, обеспечивающая его адаптивность

#css

Вопрос:

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

На этом изображении вы можете увидеть стартовую структуру:

введите описание изображения здесь

 .container {
  background: linear-gradient(100deg, rgb(162, 30, 30) 0%, rgb(27, 57, 172) 100%);
  width: 100%;
  height: 200px;
}

.element-1,
.element-2 {
  height: 100px;
}

.label {
  width: 300px;
  height: 100%;
  background-color: #fff;
  position: relative;
  left: 20%;
} 
 <div class="container">
  <div class="element-1">
    <div class="label">
    </div>
  </div>
  <div class="element-2">
  </div>
</div>

Это тот результат, который я хотел бы получить:

введите описание изображения здесь

Именно так и должно быть с экраном узкой ширины:

введите описание изображения здесь

Что мне нужно, так это «эффект маски»: я попробовал свойства css-клипа, путь к клипу, изображение маски, но я не смог сделать то, что мне нужно.

Единственное решение, которое я нашел, состояло в том, чтобы добавить псевдоэлементы с белым фоном до и после, чтобы покрыть все, кроме метки, но окончательный макет будет намного сложнее, чем в этом примере, и мне кажется довольно грязным решением (есть радиус границы, и мне пришлось добавить небольшие псевдоэлементы, чтобы также покрыть углы).

Ответ №1:

Вы можете попробовать, как показано ниже:

 .container {
  height: 200px;
  position:relative;
  z-index:0;
}

.element-2 {
  height: 100px;
  clip-path:inset(0);
}

.label {
  display:inline-block;
  padding:5px;
  color: #fff;
  margin-left: 20%;
  clip-path:inset(0);
}

.label:before,
.element-2:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background: linear-gradient(100deg, rgb(162, 30, 30) 0%, rgb(27, 57, 172) 100%);
  
} 
 <div class="container">
  <div class="label"> label here </div>
  <div class="element-2">
  </div>
</div>

Комментарии:

1. Спасибо, это прекрасно! Я перепробовал много способов, но это единственное решение, о котором я не думал. Я изменил вставку только на полигон, потому что мне нужны были закругленные края в верхней части метки (например, радиус границы).

2. @VinzClortho если вы хотите закруглить край, измените путь клипа с помощью маски: -webkit-mask:linear-gradient(#fff 0 0) а затем вы можете использовать радиус границы

Метки: ,