이미지 위로 커서 이동

Question

나는 Joomla에서 웹 사이트를 만들고 있습니다.

내 첫 페이지에는 링크가있는 이미지가 있습니다.

나는 약간의 녹색 효과를 얻기 위해 이러한 이미지를 원합니다. 예를 들어, 불투명 + 녹색 및 stil은 원본 이미지가 아래에 있습니다.

이 경우 CSS에서만 가능합니까?

불투명도는 작동하지만 녹색은 사용할 수 없습니다.

희망 좀 도와주세요.

Here is my site. it is the the small images under "Referencer" and "Nyheder"

Answer 1

당신은 쉽게 순수 CSS로 당신이 원하는 일을 할 수 없습니다. CSS에는 "오버레이"가 없습니다. 배경색/불투명도를 조작 할 수 있지만 이미지가 항상 위에 있으므로 원하는 효과를 얻지 못합니다.

이미지의 배경을 A로 만든 다음 배경이 이미 적용된 유사한 이미지로 변경해야합니다. 이미지가 작아서 동일한 이미지에서 모두 이상한 모양으로 스프라이트를 쉽게 만들 수 있습니다. 내 회사 웹 사이트의 맨 위에있는 소셜 아이콘에 정확히 이것을했습니다. - http://www.bnrbranding.com/

Answer 2

이것은 CSS로 가능합니다. 주요 트릭은 디스플레이 유형이 인라인이기 때문에 링크가 현재 img 블록을 둘러 쌀 수 없다는 것입니다.

다음과 같은 HTML을 가정 :

<a href="#" class="greenish"><img src="..." /></a> 

이 당신이 필요로하는 CSS입니다 :

a.greenish { 
    background: green; 
    display: inline-block; 
} 
a.greenish img { 
    opacity: 0.5; 
} 

분명히, 녹색 및 불투명도가 맛을 조정합니다.

예제를 보려면 lovely jsfiddle을 참조하십시오. 이 기능에는 마우스를 올렸을 때 녹색으로 만 바뀌기를 원한다는 추가 기능이 포함되어 있습니다.