2014-01-29 4 views
2

Я пытаюсь создать веб-сайт, и я хочу кликать (маскировать) текст с навигатора. Текст становится как отверстие в навигационной панели, и через него просматривается фоновое изображение. Как это сделать?Как сделать текстовый клип внутри navbar?

JSFIDDLE

//css code 
text{ 
    background-image: inherit;  
    color: transparent; 
    font-size: 20px; 
    top: 0px; 
    position: relative; 
    margin-top: 10px; 
    padding: 0px; 

} 
+1

Возможный дубликат [CSS: Могу ли я использовать текст в качестве маски, чтобы фоновое изображение отображалось только внутри текста?] (Http://stackoverflow.com/questions/11924800/css-can-i-use-text- as-a-mask-so-the-background-image-shows-inside-the-text-only) – Jeroen

ответ

0

Там в CSS свойство называется background-clip, что, кажется, действительно делать то, что вы ищете. К сожалению, он не поддерживается до IE9 (но работает и с другими главными браузерами: Chrome, FF, Opera, Safari).

В зависимости от важности этой реализации вы всегда можете иметь другой рендеринг для старых версий IE и использовать background-clip в любом другом контексте.

См. Это Fiddle и комментировать, если это то, что вы искали!


EDIT: Я не понял первоначальный запрос. Я попытаюсь найти подходящее решение для актуального вопроса! Извини за это.

+0

Вы уверены в поддержке IE9 + и FF? – vals

+0

Я взял эту информацию из [Mozilla Developper Network] (https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip), она, по-видимому, поддерживается FF с 4.0. – Kad

+0

background-clip: border-box, padding-box, content-box поддерживается. background-clip: текст нет. Проверьте источник. – vals

Смежные вопросы