I'm trying to mask some text with a striped image. When i inspect the element i can see the mask image but it will not work. Link below.
I got the code from the Trent Walton site, the strange this is that if i copy the image path from Trent's site and place it in my css it works.
http://trentwalton.com/2011/05/19/mask-image-text/
If you can tell me where i am going wrong I'd appreciate it.
Mask images have to be monochrome. Colours inside of them will have no effect.
It is something to do with your PNG. I'm not really sure why, but I quickly swapped out your http://piersrueb.com/colors/img/stripes.png for Trent's http://trentwalton.com/wp-content/uploads/2011/05/mask.png using Chrome's web inspector and it started working.
I couldn't tell you why this is happening, perhaps some weird image meta? But I hope that helps you figure it out. :)
I hope you are looking this :-
you can use css3 property -webkit-text-fill-color: transparent; for transparent text &
-webkit-background-clip: text; for call the bg image in text clip....
but these properties only support for web-kit browsers.....
HTML
<p>R</p>
<p>T</p>
<p>SUPER</p>
CSS
p{
font-size:5em;
font-family:impact;
background: url(http://farm8.staticflickr.com/7245/7086291447_06484c1d6a_z.jpg) fixed;
position:relative;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display:inline-block;
text-align:center;
padding:10px;
}
p:after{
content:'';
position:absolute;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}
body{
background: url(http://farm8.staticflickr.com/7245/7086291447_06484c1d6a_z.jpg) fixed;
}
