Question

我遇到了一个问题，我在图像上放置了透明的彩色背景，图像部分显示，我希望当用户将鼠标悬停在其上时，颜色的不透明度为0.0（消失），显示图像。

这是我的代码：

#music{
    /*background-color: #13505B;*/
    background: url('../images/music.jpg'); 
}


#music::before{
    position:absolute;
    content: ""; 

    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    transition: background 0.5s ease; 
    z-index: 1;
    background-color: rgba(19, 80, 91, 0.7) !important;
}

#music:hover::before{
    background-color: rgba(19, 80, 91, 0.0) !important;
}

我还没有能够使这个效果起作用。任何帮助表示赞赏。

Answer 1

您需要将position: relative;添加到#music。我想就是这样。我刚刚为缺少图像添加了background-color。

#music{
    background-color: deeppink;
    height: 300px;
    width: 300px;
    position: relative;
}


#music::before{
    position:absolute;
    content: ""; 

    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    transition: background 0.5s ease; 
    z-index: 1;
    background-color: rgba(19, 80, 91, 0.7);
}

#music:hover::before{
    background-color: rgba(19, 80, 91, 0.0);
}

<div id="music"></div>

在图象的透明颜色背景在翱翔去除

1 个答案: