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

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 이미지가 transparant 아니라는 것을 알고 다른 Transparant 이미지를 사용하고 작동합니다.

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> 

자바 스크립트

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

시도 이런 식으로 포장 및 용기 내부 클래스 오버레이 사업부를 추가