如何淡化背景图像以使链接/文本可见？答案

【问题标题】：How to fade background image so links/text is visible?如何淡化背景图像以使链接/文本可见？
【发布时间】：2011-11-19 19:12:23
【问题描述】：

我想要实现的是在鼠标悬停时让图像淡出以便文本可见 - 图像是（例如）CD封面，当鼠标指针放在图像上时，它应该淡出到显示专辑的曲目列表。每个曲目列表都是指向 youtube 上曲目的超链接。

我对 jquery 的经验为零，所以我希望用 javascript 来做到这一点。

我将非常感谢任何帮助，因为我现在已经花了大约两天时间试图在谷歌上找到答案。

【问题讨论】：

我真的建议你学习 jquery，它非常简单且无痛。它还可以非常轻松地处理动画。

标签： javascript text mouseover fadeout

【解决方案1】：

如果在“淡入淡出”下你的意思是动画，试试这个：

function SetObjectOpacity(obj, op, op100)
{
    obj.style.opacity = op.toString();
    obj.style["-moz-opacity"] = op.toString();
    obj.style["filter"] = "alpha(opacity=" + op100 + ")";
}

function FadeImage(imageid)
{
    var framedelay = 50;
    var frame = 0, img = document.getElementById(imageid), animint;
    animint = setInterval(function() {
        frame++;
        SetObjectOpacity(img, frame / 20, frame * 5);
        if (frame == 20) {
            img.style.visibility = 'hidden';
            clearInterval(animint);
        }
    }, framedelay);
}

在 HTML 代码中：

<div style="width: 200px; height: 200px; position: relative;">
    <div style="position: absolute; top: 0; left: 0; width: 200px; height: 200px;">
        text you want to show
    </div>
    <img src="yourimage.jpg" id="yourimage" onMouseOver="FadeImage('yourimage');" style="position: absolute; top: 0; left: 0;">
</div>

鼠标移开后退色很明显。

【讨论】：

【解决方案2】：

我真的推荐你使用 jQuery——它让一切变得如此简单。这并不难。毕竟，我们已经为您准备好了代码（我很乐意进一步解释），所以您需要做的就是包含它。

所以，假设你使用 jQuery，试试this:

$(".overlay").hover(function(){
    $(this).stop().fadeTo(300,0.8);   
},function(){
    $(this).stop().fadeTo(300,0);
});

这是你的 HTML/CSS：

<div class="container">
    <img src="http://placehold.it/200/200" />
    <div class="overlay">
        <a href="#">Hi</a><br>
        <a href="#">Hi</a><br>
        <a href="#">Hi</a><br>
    </div>
</div>

.overlay {
    position:absolute;
    margin-top:-205px;
    width:200px;
    height:200px;
    background-color:black;
    opacity:0;
}

【讨论】：

OP 说他想避免使用 jQuery，转而使用纯 JS 解决方案。阅读问题。
@Truth：我做了，但我发布这个是为了向 OP 推荐 jQuery。如在，部分答案是建议使用 jQuery。他真的应该走简单的路线——我们已经为他准备好了代码，他只需要包含它。如有必要，我可以解释一切的作用。
嘿 Purmou，感谢 jQuery 提示 - 我正在快速浏览网上的教程，看看我是否能理解它（我只剩下几天时间提交这个上大学了，所以时间不是我的朋友！）我不想成为提出问题并且再也没有收到任何消息的“那个人”，所以感谢大家的回复 - 我会让你知道我是怎么过的。
抱歉 Purmou，你能告诉我应该输入什么而不是“this”吗？谢谢。
@Brendan: $(this) 是一个有效的 jQuery 选择器——它所做的是选择当前选择的元素（因此，在这种情况下，它选择类为 overlay 的元素。你检查过吗？我的 jsfiddle？