“negative” text in css? [duplicate]_问答_开发者

开发者 https://www.devze.com 2023-04-10 16:10 出处：网络

This question already has answers here: Transparent text cut out of background 开发者_如何学编程(14 answers)

This question already has answers here: Transparent text cut out of background 开发者_如何学编程 (14 answers) Closed 7 years ago.

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]

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.