如何在漸變背景上使用投影進行文本漸變？

這就是我需要的決絕在CSS（這是非常醜陋的，但它表明我的問題也是一個例子）：如何在漸變背景上使用投影進行文本漸變？

Gradient example

我們有過文字梯度上的陰影具有輕微梯度的背景。

我試過了我能找到的每種方法。

This method將無法使用文字陰影。

由於我沒有純色背景，PNG疊加方法將不起作用。

This method將無法正常工作，因爲它需要我將文本字符串放入CSS中，並且我的文本將是動態的。

所以，我很難過。

它不需要在每個瀏覽器中工作（如果需要，我可以忽略IE）。如果它只適用於Webkit瀏覽器，那也可以。

來源

2011-10-27 Shpigford

這應該是答案：

HTML

<h1><span>Filthy</span></h1>

CSS

h1 { 
    position: relative; 
    font-size: 300px; 
    line-height: 300px; 
    text-shadow: -3px 0 4px #006; 
} 
h1 span { 
    position: absolute; 
    top: 0; 
    z-index: 2; 
    color: #d12; 
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); 
} 
h1:after { 
    content: attr(cssFilthyHack); 
    color: #000; 
    text-shadow: 3px 3px 1px #600; 
}

$('h1').each(function(i, e){ 
    var el = $(e); 
    el.attr('cssFilthyHack', el.find('span').html()); 
});

重要的是使用content: attr(cssFilthyHack);提取從h1文本。你可以添加文本第二次在HTML這樣

<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>

或者你使用JS jQuery的方法來自動執行此操作。

UPDATE

與跨度取代了一個標籤，加js功能。

看到這裏的例子在行動：http://jsfiddle.net/alligator/Gwd3k/

來源

2011-10-27 13:48:16 Marc

我只是從你的鏈接 – Marc

如此接近複製的例子。你能想出一種「文本對齊：文本中心」的方法嗎？絕對定位可能會導致不可能。 – Shpigford

對不起，不知道如何居中，只是複製你的例子，解決你的問題 – Marc

如何在漸變背景上使用投影進行文本漸變？

回答

相關問題