CSS: Могу ли я использовать текст в качестве маски, чтобы фоновое изображение отображалось только внутри текста?

У меня хороший фон на моей странице, и я хочу, чтобы мой текстовый заголовок выступал в качестве маски, чтобы прорезать его содержащий div и иметь фон как текстуру. Могу ли я сделать это в CSS или мне нужно открыть Photoshop?

Ответ 1

Ограниченная поддержка браузера, но background-clip может получить этот эффект: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (нажмите кнопки "Анимация" для удовольствия)

Используя SVG, вы можете сделать это следующим образом: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (Посмотрите, что на самом деле сделано, см. справочная статья)

Используя фоновое изображение, а затем CSS, вы можете сделать это: http://www.netmagazine.com/tutorials/texturise-web-type-css

Ответ 2

В CSS3 есть свойство background-clip: text, хотя оно не работает в каждом браузере. Подробнее см. здесь.

Ответ 3

Как показано в этой статье CSS-хитрости, "изображение за текстом" можно сделать так:

h1 {
   color: white;  /* Fallback: assume this color ON TOP of image */
   background: url(images/fire.jpg) no-repeat; /* Set the backround image */
   -webkit-background-clip: text; /* clip the background to the text inside the tag*/
   -webkit-text-fill-color: transparent; /* make the text transparent so 
                                          * the background shows through*/
}

Но не гарантируется работа на всех браузерах, поэтому они предлагают несколько способов обхода, например, modernizr.

Вот как это выглядит, когда работает: