Javascript CSS彩色套印

不幸的是，我还没有找到一个适合我需要的通用问题的答案，所以我向你们展示这个

问题是：

我有一个图像需要用颜色覆盖。下面我有代码

HTML:

Jquery：

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

---

如果您能提供帮助，请告诉我。

您不需要使用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图像不透明，使用其他透明图像，它会工作的。

检查这个小提琴

HTML

CSS

---

不需要jQuery。您可以使用：：after伪元素

HTML:

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

小提琴：

---

尝试这样包装它，并在容器中添加一个带有类覆盖的div

为什么要为hover类编写overflow:hidden

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

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

    z-index: 1;
}

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

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

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

.hover {
    overflow: hidden;
    z-index: 1;
    opacity:0.1;
}
.bg {
    background-color: rgba(48, 48, 48, 0.9);
    top: 100px;
    display:inline-block;
}

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

.portfolio-item { //container
    position: absolute;
    top: 100px;
    left: 0px;
}
.portfolio-item img { //image styling
    height: 200px;
    width: 200px;
    border-radius:25px;
}
.portfolio-item:after { //contains the 'overlay'
    position:absolute;
    display: block;
    content: "";
    top: 0px;
    left: 0px;
    height: 200px;
    width: 200px;
    background: rgba(48, 48, 48, 0.9);
    z-index: 101;
    opacity: 0;
    border-radius:25px;
}
.portfolio-item:hover:after {
    opacity: 1;
}

.container {
  width : 200px;
  height: 200px;
  position: relative;
}

.overlay {
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .4;  
}