Vorrei ottenere tramite html un effetto maschera (o si chiama ritaglio?) come quello di questa pagina http://codepen.io/fixcl/pen/CHgrn
con un testo sovrapposto ad un rettangolo bianco ma ma con un certo grado di opacità e il testo non riempito di colore ma trasparente in modo che si veda lo sfondo sottostante. Lo sfondo sottostante però è già dato, cioè è quello della pagina del sito preesistente.
Qualcosa di simile si trova su questo sito: http://www.html.it/pag/53875/mascher...con-css-e-svg/
ma non desidero il riempimento del testo bensì appunto il testo trasparente e che rende trasparente lo sfondo bianco sottostante in modo che si veda lo sfondo dato.
In altre parole vorrei modificare il codice qui sotto in modo da togliere il gradiente e sostituirlo con la trasparenza:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="600" height="300" viewBox="0 0 600 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="600" y2="0">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask" width="600" height="300" x="0" y="0" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="600" height="300" fill="url(#Gradient)" />
</mask>
<text id="Text" x="300" y="160" text-anchor="middle" font-size="96" font-weight="bold">CSS & SVG</text>
</defs>
<rect x="0" y="0" width="600" height="300" fill="#F80" />
<use xlink:href="#Text" fill="blue" />
<use xlink:href="#Text" fill="white" mask="url(#Mask)" />
<use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
</svg>
Rispondi quotando