2014-12-31 1 views
0

불투명도를 에뮬레이트하려고하는 배경 이미지가 있습니다. opacity:.5;가 작동하지 않으므로 상단에 반투명 흰색 사각형을 추가하기로 결정했습니다.내가 얻으려고하는 것 : after : 작업 할 때 가리 키다

.pic:after{ 
    content:""; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

.pic:after:hover{ 
    content:""; 
    background-color: rgba(118, 255, 161, 0.35); 
} 

무엇이 누락 되었습니까?

+1

, 당신은 요소 이후에 이미지를 넣어 당신이 http://css-tricks.com/snippets/css/transparent-background를 참조 :)에 원하는대로 불투명도를 설정할 수 있습니다 -images/ – sodawillow

+0

정말 기쁘 네요. 나는 그 기술이 미래의 다른 분야에서 나를 도울 것이라고 이미 알고 있습니다! : D –

답변

2

.pic:after은 DOM의 요소가 아닙니다. :hover.pic에 적용한 다음 해당 : pseudo-element (.pic:hover:after)를 선택해야합니다.

선택기 반전 외에도
.pic:hover:after{ 
    content:""; 
    background-color: rgba(118, 255, 161, 0.35); 
} 
+1

아, 고마워! –

관련 문제