CrossBrowser透明文本與css

我有一個div與背景圖像，這樣的div裏面我有另一個更小的元素，並有白色的背景顏色。在這個元素的內部，我有我不想透明的文字，所以我們可以看到第一個div的背景圖像。CrossBrowser透明文本與css

試過申請color: transparent;但它似乎沒有工作。有可靠的，CSS的方法來實現這一目標？

2013-04-21 Ilja

[此鏈接]（http://www.codicode.com/art/background_text_effect_css_picture_svg_mask.aspx）可以幫助您使用SVG來一個可行的解決方案。 – ScottS 2013-04-21 19:34:13

你不行。做這種事情的唯一方法就是讓「帶有文本的背景」成爲放置在背景圖像上的圖像。

2013-04-21 17:39:47

JavaScript怎麼樣，它可以實現嗎？ – Ilja 2013-04-21 17:41:16

沒有。除了可能使用畫布，但在IE8或更低版本中無法使用。 – 2013-04-21 17:41:48

好thnx的信息，這是一個無賴..我會給你一個答案，一旦我可以 – Ilja 2013-04-21 17:42:50

實際上，這隻適用於CSS。在白色背景的較小元素中，您可以使用CSS3和IE 6-8的後備。對於後備，您可以使用透明的PNG。

爲白色BG的CSS3代碼如下：

background-color: rgba(255,255,255,0.5)

我成立了一個codepen你在行動中看到的代碼。 http://codepen.io/DheerG/pen/tkKqC

另外，如果您希望小元素中的所有內容都是透明的，您可以使用css opacity元素。

opacity: 0.6; 
/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
/* IE 5-7 */ 
filter: alpha(opacity=60);

2013-04-21 19:48:50 Dheer

你誤解了OP是渴望。他希望_文本本身的字母_能夠從背景中顯示圖像（文本是完全透明的），但是文本週圍的白色是純白色的（完全不透明;因此就像字母被切掉）。你的解決方案只是讓文字和白色褪色一些，而不是達到那種效果。 – ScottS 2013-04-22 01:43:11

現在你提到它，這個問題可能意味着什麼。關於較小的元素與白色背景的問題的部分扔我想我。因此，我認爲OP想要讓父節點透明，並且不讓孩子繼承不透明。 – Dheer 2013-04-22 14:26:31

回答