CODEWITHSUNDEEP
cssimagefontstexturesmask
Albert Renshaw
Albert Renshaw

Reputation: 17892

CSS mask-image not working (tried firefox and safari)

I'm trying to use the mask-image property to put a texture over text... It works when I view it on other people's sites but when I try to view it on a demo site I made it doesn't work... Here is my full code: (I don't own the image being used)

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

Upvotes: 1

Views: 3914

Answers (1)

polarblau
polarblau

Reputation: 17734

Based on the example image I'll go out on a limb here and assume that what you really want is this (example for 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/

A mask makes only sense if you're having an transparent area within your image:

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

Upvotes: 2

Related Questions