Q

如何使用CSS3在文本中放置圖像？

2012-06-16 47 views 3 likes

3

我想在鼠標懸停時使用蒙版更改文本的外觀。我認爲圖像蒙版將是正確的方式來做到這一點，但我不能得到它的工作。我的目標是讓文字內的圖像。如何使用CSS3在文本中放置圖像？

HTML：

<div id="BEN">BEN</div>

CSS：

#ben { 
    font-family: 'Arial'; 
    font-size: 72px; 
    color: rgba(0,0,0,1); 
    float: right; 
    line-height:90px; 
    font-weight:bold; 

} 
#ben:hover { 
-webkit-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg); 
-o-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg); 
-moz-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg); 
mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg); 
}

http://jsfiddle.net/tKE6N/3/

2012-06-16 Ben Jackson

+0

請注意，CSS ID區分大小寫:) – egasimus

+0

謝謝，但我仍然看不到圖像蒙版正在工作 –

+0

您是否期望在大字母內看到圖像.jpg文件？另外，用正確的ID case-style更新你的jsFiddle，它們不應該有所不同。 – arttronics

A

回答

4

根據您的問題標題更重要的是你期待的文本信件內的圖像的評論，你需要使用CSS3 background-clip做到這一點，不mask-image。

這裏有一個webkit tutorial指向你正確的方向。

與此jsFiddle一起玩（Chrome或Safari）。

對於background-clip值，Firefox不支持text但支持border-box，padding-box和content-box。由於這個原因，演示在Firefox v13.0.1中不起作用，但是v14預計會有這個功能。

解決方法是使用SVG方法，如圖所示HERE。

2012-06-17 00:52:45 arttronics

+0

謝謝，非常好。 –

+0

謝謝，我已經按照你的所有說明，但不明白爲什麼這個簡單的代碼不工作：http://jsfiddle.net/tKE6N/5/ –

+1

更改'rgba（0,0,0,1）'爲'rgba （0,0,0,0.5）'，因爲最後的值代表alpha-transparency，它允許你在字體顏色下看到背景圖像。對於沒有混合的字體顏色，請使用'rgba（0,0,0,0）'。 – arttronics

1

它不工作，因爲你有<div id="BEN">BEN</div>聲明你的股利和你CSS類奔所以更改類到BEN或更改您的div到id="ben"

這是您首先必須首先檢查您是否在HMTL廣告CSS文件中有正確的類別。 CSS班級是case-sensitive所以BEN與ben不一樣。

更多information

這裏有更多有關CSS Mask-Image & Text

2012-06-16 23:43:01 Sajmon

+0

謝謝，但我仍然沒有看到在jsfiddle或我的服務器上工作的圖像蒙版 –

相關問題