如何淡化背景图像，使链接/文本可见

How to fade background image so links/text is visible?

本文关键字：文本 链接 何淡化 背景 图像      更新时间：2023-09-26

我想要实现的是有一个图像在鼠标悬停时褪色，以便文本可见-图像是(例如)cd封面，当鼠标指针放置在图像上时，它应该褪色以显示专辑的曲目列表。每个曲目列表都是youtube上曲目的超链接。

我没有jquery的经验，所以我希望用javascript做到这一点。

我将非常感谢任何帮助，因为我已经花了大约两天的时间试图谷歌一个答案。

如果在"fade"下你的意思是动画，试试这个:

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>

鼠标退出时退色很明显

我强烈建议您使用jquery;它使一切都变得容易得多。这并不难。毕竟，我们已经为您准备好了代码(我很乐意进一步解释它)，所以您所需要做的就是包含它。

那么，假设你使用jQuery，试试这个:

$(".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;
}
相关文章：