HTML / CSS: текст «сквозь фон»?

Ок, это возможно?

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

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

Есть ли другой, лучший способ?

 Jared Farrish09 июн. 2012 г., 01:23
Почему это "хакерский"? Это слой с прозрачностью.
 Jared Farrish09 июн. 2012 г., 01:31
@Celeritas - не используйте ссылки на w3schools здесь, в Stackoverflow; он "напряжен" отношения, скажем так. Ссылка на спецификации, на такие сайты, как HTMLDog, Sitepoint ... Просто не w3schools (см.w3fools.com). FYI
 Ry-♦09 июн. 2012 г., 01:31
Единственный способ, которым я могу думать, - это только WebKit. Все хорошо?
 Celeritas09 июн. 2012 г., 01:22
Может помочь использование свойства прозрачности CSS 3.w3schools.com/css/css_image_transparency.asp
 Ry-♦09 июн. 2012 г., 01:32
@JaredFarrish:-webkit-background-clip: text с несколькими фонами. Может быть. Я все еще работаю над этим: P (хотя, если фон статичен, то это будет очень просто.)

Ответы на вопрос(1)

Решение Вопроса

-webkit-background-clip: text;: демо здесь (вебкит только очевидно).

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

#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, который будет работать во всех современных браузерах.

Ваш ответ на вопрос