HTML/CSS: текст "Просмотреть через фон"?

У меня фоновое изображение. Кроме того, у меня есть прозрачный серый квадрат для контента. Я хотел бы иметь заголовок в верхней части текста, то есть в основном буквы, отображающие фон. Таким образом, текст удаляет серый квадрат и пропускает фон.

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

Ответы

Ответ 1

Один из способов - использовать -webkit-background-clip: text;: здесь (только для webkit).

Используя положение, мы можем синхронизировать оба фона:

#container, #container h1 {
    background: url(bg.png)
}

#container {
    position: relative;
}

#container #gray {
    background: rgba(0,0,0,.8);
    padding-top: 8em;
}

#container h1 {
    font-size: 8em;
    padding-top: /* padding + border of div */;
    position: absolute;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

Или вы можете использовать тот же подход и применить svg mask, который будет работать во всех современных браузерах.