透明文本而忽略第一背景

我不知道這是否可能在CSS，我相信它可以在JS做，但我不知道如何...透明文本而忽略第一背景

我有一個div帶有背景和另一個背景的文本。我想要的是文本是透明的，並有第一背景作爲文字背景。我不知道這是不是清楚，所以我創建了一個搗鼓這個：

<div id="first-background"> 
    <div id="second-background"> 
     <h1>This text should be transparent and have the first-background as its background and ignore the second background.</h1> 
    </div> 
</div>

http://jsfiddle.net/K2Ytv/

來源

2013-06-26 emcee22

它正在做你想要的東西......？或者，也許我沒有把握好。 –

即時通訊也不確定你的意思？您想要將第一個div的背景切換爲秒。 div與jQuery？ – reyaner

文本應該是透明的，並忽略＃second-background。它應該有＃第一背景... – emcee22

這種技術被稱爲剪貼蒙版。

你可以參考DEMOS AND TUTORIALS ON CLIPPING MASK來實現你想要的。

來源

2013-06-26 07:00:36 Nitesh

哇，這是他要求的嗎？ carzy，永遠不會thht ... :) – reyaner

非常感謝nathan！這是它... – emcee22

是的，我認爲這是它...然而這是css3，所以它不會與很多瀏覽器一起工作：'（（+1）雖然） –

你可以試試這個東西了。

#first-background{ 
     background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT_1zl6-e5P_loFXt6vq6aA50usSJwm2amdkqPaVSQums5KalLX4A); 
     background-repeat: no-repeat; 
     background-size: 100%; 
     width: 700px; 
     height: 700px; 
    } 

    #second-background{ 
     background-color: red; 
     opacity: 0.5; 
     width: 700px; 
     height: 435px; 
    } 
    h3{ 
     color: rgba(53,90,150,0.4); 

    }

來源

2013-06-26 07:03:26

透明文本而忽略第一背景

回答

相關問題