解决方案:如何在图像上制作透明文本

Question

解决方案：给出CSS-透明字体。您想要的任何字母。它来自：http：//lea.verou.me/2012/05/text-masking-the-the-pandards-way/，有些编辑。

/**
 * Text masking — The SVG way
 */
svg {
	width: 7em; height: 3em;
	font: 900 500%/1.2 'Arial Black', sans-serif;
}
text { fill: url(#wood); }

<svg>
<defs>
	<pattern id="wood" patternUnits="userSpaceOnUse" width="240" height="300" >
		<image xlink:href="http://hd.wallpaperswide.com/thumbs/girl_beach_background-t2.jpg" width="400" height="400" />
	</pattern>
</defs>
<text y="2em">Nice Beach</text><text y="3em">Isnt't It</text>
</svg>

代码：只需更改＆lt;文字..>更改此＆lt;/text>换句话说。

html

<svg>
<defs>
    <pattern id="wood" patternUnits="userSpaceOnUse" width="240" height="300" >
        <image xlink:href="http://hd.wallpaperswide.com/thumbs/girl_beach_background-t2.jpg" width="400" height="400" />
    </pattern>
</defs>
<text y="2em">Nice Beach</text><text y="3em">Isnt't It</text>
</svg>

CSS：

/**
 * Text masking — The SVG way
 */
svg {
    width: 7em; height: 3em;
    font: 900 500%/1.2 'Arial Black', sans-serif;
}
text { fill: url(#wood); }

Answer 1

带有CSS。很容易：

div {
    opacity: 0.5;
}
div p { 
    opacity: 1.0;
}

只需将div和p更改为您需要的任何内容。

Answer 2

/**
 * Text masking — The SVG way
 */
svg {
	width: 7em; height: 3em;
	font: 900 500%/1.2 'Arial Black', sans-serif;
}
text { fill: url(#wood); }

<svg>
<defs>
	<pattern id="wood" patternUnits="userSpaceOnUse" width="240" height="300" >
		<image xlink:href="http://hd.wallpaperswide.com/thumbs/girl_beach_background-t2.jpg" width="400" height="400" />
	</pattern>
</defs>
<text y="2em">Nice Beach</text><text y="3em">Isnt't It</text>
</svg>
 Run code snippet