“negative” text in css? [duplicate]
i was wondering if it was somehow possible to create an effect as shown in the attached picture with simple css. What would be the next best alternative? Thanks in advance!
![“negative” text in css? [duplicate]](https://i.stack.imgur.com/4X5PS.png "“negative” text in css? [duplicate]")
Currently you can't achieve this using only CSS. However, you can do that in webkit based browsers (Safari, Chrome etc.) using CSS extentsions and emulate via SVG in other modern browsers which supports SVG.
Example markup for webkit based browsers:
<!DOCTYPE html>
<html><head>
<title>Foo</title>
</head><body>
<div class="mask">
<h1>Masked Text</h1>
</div>
</body></html>
and Css:
.mask {
font-size:90px;
font-family:Arial, sans;
font-weight:700;
background:white url(/image.jpg) repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
See working example here : http://jsfiddle.net/Q9JWM/ (Works only Chrome & Safari)
Also here a SVG emulation experiment to achieve masked text effect.
Look into opacity. Here's a link to documentation from W3C. And this IS probably a stackoverflow question...however, the point of CSS is to control presentation - ergo, design of the page, thus fulfilling a requirement of this site as well.
加载中,请稍侯......
精彩评论