我如何在CSS中做到這一點？一個元素背景內的另一個元素背景上的透明背景

Question

這是可能的嗎？我的CSS不錯，但我不能圍繞這個聽到。我想在標題後面使用背景圖像，但是我希望標題能夠「背景」背景圖像，使背景背離任何一方。我希望這是有道理的。

我做了一個小提琴incase任何人都想要bash ...謝謝！

http://jsfiddle.net/CnVBU/

Answer 1

做的最簡單的方法，這是與border-image。看到你更新的小提琴here。

下面是它的CSS（多個瀏覽器）：

.container { 
    border-width: 20px; 
    -moz-border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round; 
    -webkit-border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round; 
    border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round; 
    text-align:center; 
} 

我生成這個代碼用Border-Image.com（因爲寫這本自己是跟地獄一樣混亂：P）。

Answer 2

那麼它現在是透明的。這聽起來像你想要的是應用與其他顏色（身體背景顏色？）的背景顏色到h1。事情是這樣的：

http://jsfiddle.net/CnVBU/1/

顯然使用任何你想要的背景顏色，增加保證金/填充等方面給予你適當的「敲除」的大小。

Answer 3

我已經更新您的jsfiddle：

http://jsfiddle.net/CnVBU/2/

現在，你有在H1透明背景。我使用RGB顏色模型：紅色（範圍：0-255）綠色（0-255）藍色（0-255）阿爾法（0-1）。 如果你想50％透明度在那裏使用0.5阿爾法。

這適用於所有常見的瀏覽器（IE大部分將需要過濾/破解吧）