对文本的翻转图象有透明背景

时间:2013-04-09 23:35:01

标签: javascript html css

我没有使用Javascript,但我对如何将图像翻转到另一个图像有一个大概的了解。我正在尝试制作一个图像,当鼠标悬停时,它将变成一个文本块的透明背景,占据图像占用的空间。我已经看过很多教程,但没有相应的内容。

另外:有没有办法用css或其他方式格式化这个文本? (比如添加填充,换行等)。

任何帮助或链接到我可以弄明白的网站将不胜感激!谢谢!

2 个答案:

答案 0 :(得分:3)

fiddle是一个纯css实现,用于更改悬停在文本前面的图像的不透明度。为此,我使用了将文本和图像容器放在容器div中并设置position: absolute以使它们重叠。然后,我使用:hover选择器更改图像的不透明度。由于文本在图像后面,因此无法选择。如果这不是你想要的,请告诉我,如果不是,请指明你想要的不同:)

答案 1 :(得分:0)

如果您希望鼠标悬停后文本保留,可以使用javascript在翻转时切换类并添加一些文本。例如,将图像作为背景放置到具有某个类的div(例如,class="solid-image")。当您想要更改元素时,只需更改类(例如,使用myElement.className="translucent-image"),然后您可以拥有以前不可见的文本,或者您可以向div添加文本(只要它没有儿童)使用textContentinnerText元素。 E.g:

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

然后为适当的事件添加一个事件监听器。