Блог

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

Маскировать только часть элемента с помощью маски CSS

#css #css-mask

#css — файл #css-маска #css

Вопрос:

У меня есть элемент, который я хочу замаскировать только в конце элемента. Мне удалось написать некоторый код, чтобы замаскировать конец элемента, но остальная часть элемента теперь также замаскирована. Я хочу изменить маску так, чтобы все элементы слева от маски по-прежнему были видны.

 .masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  mask-image: linear-gradient(to right, black, transparent);
  mask-size: 30px;
  mask-repeat: no-repeat;
  mask-position: right;
}  
 <div class="masked"></div>

Ответ №1:

Вам нужно несколько масок

 .masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  -webkit-mask: 
    linear-gradient(black 0 0)                    left,
    linear-gradient(to right, black, transparent) right;
  -webkit-mask-size:
    calc(100% - 30px) 100%,
    30px              100%;
  -webkit-mask-repeat: no-repeat;
}  
 <div class="masked"></div>

Или вы настраиваете одну маску, как показано ниже:

 .masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  -webkit-mask: linear-gradient(to right, black calc(100% - 30px), transparent);
}  
 <div class="masked"></div>

Другой синтаксис:

 .masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  -webkit-mask: 
    linear-gradient(to left , black, transparent) right/30px 100% no-repeat,
    linear-gradient(black 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}  
 <div class="masked"></div>

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

1. Приятно, мне нравится решение использовать calc() внутри градиента, я не знал, что есть варианты. Спасибо!