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

回答

相關問題