CSS颜色叠加

不幸的是，我还没有找到符合我需求的这个通用问题的答案，所以我把这个给你。CSS颜色叠加

问题：

我有需要“重叠”用彩色的图像。下面我有代码。

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

让我知道，如果你可以提供帮助。

来源

2014-03-04 Liam Shalon

为什么哟你写溢出：悬停类隐藏 –

你不需要使用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图像不TRANSPARANT，使用其他TRANSPARANT形象，它会工作。

来源

2014-03-04 05:18:58

检查这个小提琴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; 
}

来源

2014-03-04 05:25:06 SajithNair

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/

来源

2014-03-04 05:25:12

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

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

尝试包装它像这样和添加一个div类覆盖容器内

来源

2014-03-04 05:25:27 Bradley

回答

相关问题