CSS透明的文字與彩色框外框

經過一番研究，沒有發現任何東西，我想知道如果有人知道一種方式，有一些文字是透明的圖像，但周圍有一個盒子，所以它仍然清晰。CSS透明的文字與彩色框外框

我嘗試

HTML

<img src="http://images2.fanpop.com/images/photos/8000000/Mountains-mountains-and-waterfalls-8031277-2560-1817.jpg"/> 

<p> this is some transparent text with a brown background </p>

CSS

img{ 
    width:500px; 
} 
p{ 
    top:100px; 
    left:20px; 
    position:absolute; 
    display:box; 
    color:rgba(0,0,0,0); 
    background:brown; 

}

預期的效果

Desired effect

來源

2013-09-27 jamesmstone

SVG是一個選項嗎？ –

@russell我只是出於好奇而問，是否可以用css – jamesmstone

檢查小提琴

fiddle

這裏的CSS

.gradient4 { 
-moz-border-radius: 15px; 
border-radius: 15px; 
text-align: center; 
margin-top: 5px; 
margin-bottom: 5px; 
background: url(http://www.silenceit.ca/wordpress/wp-content/uploads/2011/03/wood_texture.jpg) repeat; 
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text; 
} 

.test{ 
    background-color:red; 
} 
.outer{ 
    height:400px; 
    width:400px; 
    background: url(http://www.silenceit.ca/wordpress/wp-content/uploads/2011/03/wood_texture.jpg) 
}

但在這裏，你需要設置紅色的背景CRCK彩色div文本完全相同的x和Y你在哪裏想要文字。 :)

來源

2013-09-27 06:47:11 Anobik

Anobik Dey，我沒有得到你的破解！ –

@anobik這是否基本上將文本的顏色設置爲背景的圖像 – jamesmstone

實際上，它是設置文本背景與背景（大）圖像相同的背景。現在對文本背景圖像進行一點定位，它將完全適合於大圖像，而另一部分是在呈現小文本的圖像中，您可以看到文本中的雲可能與實際的雲不匹配，但自從展開區域它也是微不足道的。 :) – Anobik

在你d的那張照片預期的效果，它不會像那樣工作。在那裏，圖像是底層，棕色框是中間層，文本在頂層。如果文本是透明的，那麼棕色框會顯示，而不是圖像。

看起來你真正想要的是將一個文本形狀的洞切成一個盒子，我認爲這是不可能的。

來源

2013-09-27 03:22:43 andi

你可以嘗試像

background: url(images/wood_texture.jpg) repeat; 
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text;

，但這個東西仍然是一個工作標準！查看實施資源並讓我知道你是否還需要其他東西！ :)

資源 http://www.silenceit.ca/2011/03/11/css-gradients-and-webkit-image-masks-on-text/

來源

2013-09-27 03:23:37

來完成我不認爲這個效果會解決原來的問題。 – andi

@andi：會的;你會得到主圖像，裏面有棕色的盒子，裏面有一個與其背景圖像相同的文本元素，然後移動到對齊位置，然後如引用文章中所示將其屏蔽。 –

但是，這將需要文本框在一個已知的位置。也許沒關係，不確定。 – andi

CSS透明的文字與彩色框外框

我嘗試

HTML

CSS

預期的效果

回答

相關問題