I'd like to put a background image on a div, and place a perfored text over it (ie the border of the perfored text will be white).
So I can see the image only across the text.
Since my text is dynamic (can't make .PNG of every word) is there a way to do this in jquery/css? Or the only solution is SVG/Canvas?
Where could I start to do such a task? It must be cross-browser (at least) for some major release (I don't mind of IE7 for example).
-webkit-text-fill-color
works only on chrome...
Are you trying to achieve something like this?
h1 { color: white; /* Fallback: assume this color ON TOP of image */ background: url("http://lorempixel.com/400/400") no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: Impact; } .backgroundclip h1 { background: url("http://lorempixel.com/400/400") 0 0 no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } h1 { color: orangered; text-shadow: 0px 0px 2px 2px #fff; } .android .gradient-text { color: white; background: none; -webkit-text-fill-color: white; -webkit-background-clip: border-box; } .gradient-text { background: -webkit-linear-gradient(gray, black); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
<h1>Hey Dude</h1>
Something like this? The fill none, stroke white gives you the white border and the clipped image, the background.
<svg width="100%" height="100%" viewBox="0 0 480 360"> <defs> <clipPath id="sample" clipPathUnits="userSpaceOnUse"> <text x="45" y="120" font-size="100">Clip Test</text> </clipPath> </defs> <rect width="100%" height="100%" fill="black">Clip Test</rect> <image xlink:href="http://www.w3.org/Graphics/SVG/Test/20110816/images/bluesquidj.png" preserveAspectRatio="none" x="20" y="20" width="410" height="160" clip-path="url(#sample)"/> <text x="45" y="120" font-size="100" fill="none" stroke="white" stroke-width="2">Clip Test</text> </svg>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.