鼠標經過圖像與透明背景

文本我沒有太多的工作使用Javascript，但我有一個如何使圖像過渡到另一個圖像一個大概的瞭解。我正在嘗試製作一張圖片，當它被挖空時，它將成爲佔據圖片佔據空間的文本塊的透明背景。我見過很多教程，但沒有任何匹配。鼠標經過圖像與透明背景

另外：有沒有辦法用CSS或以其他方式格式化這段文字？（如添加填充，換行等）

任何幫助或鏈接到一個網站，我可以計算出來，將不勝感激！謝謝！

2013-04-09 Lapys

你想要的背景圖像變得完全透明或半透明的？ – Markasoftware 2013-04-09 23:39:09

半透明，我想。我的錯。我基本上想要降低它的不透明度並在它前面打一巴掌。 – Lapys 2013-04-09 23:47:44

這fiddle是一個純粹的CSS實現改變放置在懸停在文本的前一個圖像的不透明度。要做到這一點，我用文字和圖像容器都在一個容器格內，並設置position: absolute，使它們重疊。然後使用:hover選擇器更改圖像的不透明度。由於文字在圖像後面，因此無法選擇。讓我知道如果這是你找什麼，並指定你想什麼不同，如果它不:)

來源

2013-04-09 23:52:33 asifrc

這非常符合我的需要。謝謝！ – Lapys 2013-04-10 00:35:32

如果你想要的文字留在鼠標懸停後，您可以使用JavaScript來切換到側翻類並添加一些文字。例如，將圖像作爲背景放到某個類的div上（例如，class="solid-image"）。當您想要更改元素時，只需更改該類（例如，使用myElement.className="translucent-image"），然後就可以使用之前不可見的文本，或者可以通過使用添加文本到div（只要它沒有子元素） textContent或innerText元素。例如：

text = "textContent" in document ? "textContent" : "innerText"; 
myDomElement[text] = "My text here";

然後爲適當的事件添加事件偵聽器。

來源

2013-04-09 23:56:41

非常有幫助，非常感謝！我想我會用上面提到的所有CSS實現，但是這也回答了我的原始問題。再次感謝！ – Lapys 2013-04-10 00:36:48

鼠標經過圖像與透明背景

回答

相關問題