CSS: Как вырезать текст на размытом фоне?

я хотел воссоздать следующий стиль

Я придумал следующее

CSS: Как вырезать текст на размытом фоне?

Проблема в том, что разрез не влияет на фильтр размытия, и я понятия не имею, как это решить. Это мой HTML-код:

.glass {
    width: 40%;
    height: 100%;
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(50px);
    z-index: 0;
    mix-blend-mode: screen;
    margin-left: auto;
    margin-right: auto;
}

.afri {
    position: absolute;
    top: 410px;
    left: 54%;
}

<div className = "glass">
    <div className = "trips">
        <h3>AMAZING TRIPS</h3>
    </div>
    <div className = "afri">
        <h1>AFRI</h1>
    </div>
</div>

Я попробовал фоновый фильтр и смешанный режим наложения: экран. Я ожидал полной версии

html css blur mix-blend-mode

11.12.2022 00:51

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать маску для достижения этого, но сейчас она доступна только в Chrome:

.box {
  /* this will do the trick */
  -webkit-mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  -webkit-mask-clip: text, padding-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /**/
  backdrop-filter: blur(8px);
  text-transform: uppercase;
  font-size: 80px;
  font-weight: bold;
  background: rgb(0 0 0/50%);
  padding: 20px;
}

body {
  background:url(https://picsum.photos/id/1016/800/300) center/cover;
  padding: 50px 0;
}

html {
  background: #fff;
}