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;
}

Jquery的：

$(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图像不透明，使用其他透明图像，它会起作用。

Answer 2

检查这个小提琴http://jsfiddle.net/sajith/sha5E/

<强> HTML

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

<强>的Javascript

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

<强> CSS

.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;
}

Answer 3

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

HTML：

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

CSS：

.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;
}

小提琴：http://jsfiddle.net/Shiazure/wJheZ/

Answer 4

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

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

尝试像这样包装它并在容器中添加带有类叠加的div

CSS颜色叠加

4 个答案: