javascript - CSS 颜色叠加

Question

很遗憾，对于这个一般性问题，我还没有找到符合我需要的答案，所以我向您展示了这个问题。

问题:

我有一张图片需要用一种颜色“叠加”。下面我有代码。

HTML:

<a href=""><img class="portfolio-item" src="https://m1.behance.net/profiles12/3455485/projects/14323837/1cdda4b7d6bad96ceee53e6bad98b8e4.png"></a>

CSS:

.portfolio-item {
    top: 100px;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 0px;
    border-radius:25px;
}

.hover {
    background-color: rgba(48, 48, 48, 0.9);
    overflow: hidden;
    z-index: 1;
}

J查询:

$(document).ready(function(){
$(".portfolio-item").hover(function(){
                        $(".portfolio-item").addClass("hover");
                    }, function(){
                        $(".portfolio-item").removeClass("hover");
                    });
});

如果你能帮忙，请告诉我。

Answer 1

你不需要使用 jQuery

.portfolio-item {
    top: 100px;
    height: 200px;
    width: 200px;
    position: absolute;
    left: 0px;
    border-radius:25px;
}

.portfolio-item:hover {
    background-color:cyan;

    z-index: 1;
}

我用过，背景颜色也在浏览器中改变，我知道你的 png 图像不是透明的，使用其他透明图像，它会工作。