CSS-маска-изображение не работает (проверено firefox и safari)

Я пытаюсь использовать свойство mask-image, чтобы поместить текстуру поверх текста ... Он работает, когда я просматриваю его на чужих сайтах, но когда я пытаюсь просмотреть его на демо-сайте, я сделал это не работает ... Вот мой полный код: (я не имею изображение используется)CSS-маска-изображение не работает (проверено firefox и safari)

<!doctype html> 
<html> 
<head> 
<h1 style="-webkit-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg); 
-o-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg); 
-moz-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg); 
mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg); 
font-size:120px;"> 
test 
</h1> 
</head> 
<body> 
</body> 
</html>

источник

2012-01-03 Albert Renshaw

'маски-image'? Вы имели в виду 'mask'? У Firefox нет «маски-образа», который я знаю. Невозможно найти его на w3.org. –

Основываясь на примере образа схожу на конечности здесь и предположим, что вы действительно хотите это (пример для WebKit):

h1 { 
    font-size: 120px; 
    background: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg) repeat 0 0, white; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

http://jsfiddle.net/ZdvXg/

Маска имеет смысл только, если у вас возникли прозрачную область в пределах вашего изображения:

http://jsfiddle.net/ZdvXg/1/

источник

2012-01-03 08:00:13 polarblau

Маска отображается, но поскольку изображение не имеет прозрачных областей, текст будет отображаться нормально. –

BINGO! именно то, что я хотел! благодаря! прекрасно работает! :) –

Но теперь проблема в следующем: как вы добавляете к ней текстовую тень? – trusktr

CSS-маска-изображение не работает (проверено firefox и safari)

ответ

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