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

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

1 голос
/ 03 января 2012

Я пытаюсь использовать свойство mask-image для наложения текстуры на текст ... Это работает, когда я просматриваю ее на сайтах других людей, но когда я пытаюсь просмотреть ее на демонстрационном сайте, я ее не Работа... Вот мой полный код: (мне не принадлежит используемое изображение) 

<!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>

1 Ответ

2 голосов
/ 03 января 2012

На основе примера изображения я выхожу здесь на конечность и предполагаю, что вам действительно нужно (пример для 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/

...