背景装飾にテキスト装飾を含めるには：text;効果？

Question

アンカータグに-webkit-background-clip: text,borderとcolor: transparentを使用しています。下線が決して見えなくなるようです。

私がしたいのは、背景のクリッピングにテキストの装飾を含めることです。

.background-clip { 
    background: url(images/index-background.jpg) repeat top center fixed; 
    -webkit-background-clip: text,border; 
    color: transparent; 
} 

.background-clip a { 
    color: transparent; 
} 

.background-clip a:hover { 
    text-decoration: underline; 
    -webkit-text-decorations-in-effect: underline; /* doesn't seem to do anything, I am having trouble finding definitive documentation on this */ 
} 

および関連HTML：：

<div class="background-clip"><a href="#">Imagine a lot of text here</a></div> 

私はWebKitのCSSプロパティを徹底的に文書を見つける多くの問題が生じています

は、ここに私のCSSです。誰かが私のアンカータグのホバーにテキストの下線を表示させるために何ができるのか知っていますか？

Answer 1

アンドリュー

color：transparentを使用している場合、下線は表示されません。以下のコードを試してみてください。

.background-clip { 
    background:url(images/index-background.jpg) repeat top center fixed; 
    -webkit-background-clip: text,border; 
    color: transparent;} 

    .background-clip a { 
    color:red; 
    text-decoration:none;} 

    .background-clip a:hover { 
    text-decoration:underline; 
    -webkit-text-decorations-in-effect: underline;}` 

Answer 2

あなたが実際に下線を得るが、それはあまりにも、透明色を持っている:)

Answer 3

あなたがそうのように、RGBA値にあなたの-webkit-テキストフィルの色を変更することができます。 -webkit-text-fill-color: rgba(0,0,0,0.3);これにより、アンダーラインが表示されます。ちょうどあなたの背景の色を一致させるために、不透明度とRGB値で遊んなど

Answer 4

私はクローム50.0と（も-webkit-background-clip: textsince version 48.0をサポートしています）のFirefoxナイトリー49.0a1

でこれをテストしてみた限り私は見ることができる、against the WebKit documentationクリッピングにテキストの装飾やテキストの影を含める方法がありません。

それは明らかにどのような方法で-webkit-background-clip: textには影響を与えませんが、標準text-decoration財産に関連する相続問題を修正するためにChromium bug-webkit-text-decorations-in-effectターゲットによります。