通過背景顏色在文字上顯示背景顏色

我試着仰視怎麼過讓文字透明的，這樣就可以看到圖像的通過文字的背景，也沒有找到這事。這是我將鼠標懸停在鏈接上時的樣子。

下面是DIV的代碼，我在做這個。

#learnmore{ 
 
    padding: 10px; 
 
    margin: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
} 
 

 
#learnmore:link{ 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
} 
 

 
#learnmore:visited{ 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
} 
 

 
#learnmore:hover{ 
 
    background: white; 
 
    color: transparent; 
 
} 
 

 
#learnmore:active{ 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
}

<div id="offer"> 
 
    <img src="imgs/detroit.jpeg" title="" alt=""> 
 

 
    <h1>Offer Header</h1> 
 

 
    <p>Here is a little bit of information about our offer.</p> 
 

 
    <a href="" id="learnmore">Learn More</a> 
 
    <a href="" id="scrolldown"><img src="imgs/down arrow.png"></a> 
 
</div>

有誰知道這是可能的嗎？

來源

2016-12-22 Joshua Blevins

應該'#learnmore：hover { background：white; 顏色：透明; }'be' #learnmore：hover { background：transparent; 顏色：透明; }'？爲什麼要將懸停背景設置爲白色？ – gabe3886

試試這個#learnmore：hover {background：none; color：#fff;} –

@ gabe3886我認爲op想要一個「雕刻出來」的文字效果，文字是透明的，並且會採用標題背景的顏色。 –

我建議這個假修復除非你想處理跨瀏覽器支持。

坐落在:hover文本顏色以匹配頭背景這是它下面的部分的顏色。

body { 
 
    background: #535686; 
 
    font-size: 22px 
 
} 
 
a { 
 
    text-decoration: none 
 
} 
 
#learnmore, 
 
#learnmore:link, 
 
#learnmore:visited, 
 
#learnmore:active { 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
} 
 
#learnmore { 
 
    margin: 10px; 
 
} 
 
#learnmore:hover { 
 
    background: white; 
 
    color: #535686 
 
}

<div id="offer"> 
 
    <img src="imgs/detroit.jpeg" title="" alt=""> 
 
    <h1>Offer Header</h1> 
 
    <p>Here is a little bit of information about our offer.</p> 
 
    <a href="" id="learnmore">Learn More</a> 
 
    <a href="" id="scrolldown"></a> 
 
</div>

來源

2016-12-22 17:47:09

我沒有使用背景顏色。它將成爲一個形象。 –

同樣的解決方法仍然適用，你只需要得到你的按鈕下的背景圖像部分的顏色值 - 這是我在上面使用的值。 –

怎麼過讓文字透明的，這樣就可以通過文字看到圖像的背景，

您可以使用mix-blend-mode: hard-light;。你也有很多的代碼冗餘（你有相同的規則:link,:active等），我已經通過使用,重構和分組在一起。

#learnmore, 
 
#learnmore:link, 
 
#learnmore:visited, 
 
#learnmore:active { 
 
    padding: 10px; 
 
    margin: 10px; 
 
    border: 2px solid white; 
 
    color: white; 
 
    font-size:40px; 
 
    text-decoration:none; 
 
} 
 
#learnmore:hover { 
 
    background-color:white; 
 
    mix-blend-mode: hard-light; 
 
    color: purple; 
 
} 
 
body { 
 
    background-color: purple; 
 
}

<div id="offer"> 
 
    <p>Here is a little bit of information about our offer.</p> 
 

 
    <a href="" id="learnmore">Learn More</a> 
 
</div>

來源

2016-12-22 17:48:02

這在Chrome中運行良好（因爲某些原因甚至FF ?!），但最終以純色文本即使：在IE中懸停 –

@ILoveCSS哦..雖然沒有檢查IE .. ..謝謝你的頭up ..我會看到可以做些什麼 –

你忘了將背景顏色添加到懸停的鏈接上。當bg顏色變爲白色時它不起作用。 –

您是否嘗試過使用不透明？

#learnmore: hover{ 
     background: white; 
     color: black; 
     opacity:.5; 
    }

來源

2016-12-22 21:55:30

你甚至可以將其切換。背景：黑色;白顏色; –

通過背景顏色在文字上顯示背景顏色

回答

相關問題