如何在背景剪輯中包含文字修飾：文字;影響？

我在錨標記上使用了-webkit-background-clip: text,border和color: transparent，看起來下劃線從未變得可見。如何在背景剪輯中包含文字修飾：文字;影響？

我想要的是在背景剪輯中包含文字修飾。

這裏是我的CSS：

.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屬性的完整的文檔。有誰知道我能做些什麼來讓文字下劃線出現在我的錨標籤上？

來源

2012-02-03 Andrew Jackman

-1

安德魯，

你不能看到，如果你用色彩強調：透明。嘗試下面的代碼，你會看到懸停下劃線。

.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;}`

來源

2012-02-03 16:39:59 Ajay

我想要的是剪輯下劃線和文本的背景。 -webkit-background-clip：當文本顏色也設置爲透明時，文本幾乎在文本上形成一個圖像，這是一個非常酷的效果。 – 2012-02-03 22:47:01

你實際上得到的下劃線，但它有一個透明的顏色，太:)

來源

2012-02-03 17:18:40

但是爲什麼它沒有剪裁背景？ – 2012-02-03 23:20:33

您可以將-webkit-文本的填充顏色更改爲RGBA值，像這樣; -webkit-text-fill-color: rgba(0,0,0,0.3);這允許下劃線顯示。剛玩的不透明度和RGB值，以匹配你的背景的顏色等

來源

2012-03-14 00:29:40 noponies

我測試過這在Chrome 50.0和Firefox每晚49.0a1（這也支持-webkit-background-clip: textsince version 48.0）

並儘可能我可以看到，against the WebKit documentation沒有辦法在裁剪中包含文字修飾或文字陰影。

根據Chromium bug-webkit-text-decorations-in-effect的目標來糾正與標準text-decoration屬性相關的繼承問題，儘管它顯然不會以任何方式影響-webkit-background-clip: text。

來源

2016-05-06 09:11:24

如何在背景剪輯中包含文字修飾：文字;影響？

回答

相關問題