CSS로 이미지를 어둡게하기 (어떤 모양 으로든)

Question

둥근 모서리가있는 이미지를 포함하여 CSS로 이미지를 어둡게하는 방법은 많이 있지만 문제는 다릅니다.

작은 강아지처럼 보이는 .png 이미지가 있다고 가정 해 보겠습니다. (예를 들어 가면 좋은 예가 없습니다.) 내 페이지에 배치하면 100x100 크기를 부여합니다.

하지만 그저 개개인의 배경에 색이 칠해지기 때문에 그 위에 무언가를 덧씌우거나 전체 이미지를 색칠 할 수는 없습니다.

CSS로 임의의 모양의 이미지에 색을 칠할 수 있습니까?

감사합니다 (난 당신이 내 지점을 이해하고 있으리라 믿고있어, 쓸모 코드는 필요하지 않습니다)!

Answer 1

대체 방법의 어려움이 있다면 최상의 방법 일 수 있으므로 항상 이미지의 불투명도를 변경할 수 있습니다.

CSS : 당신은 충분히 결정하는 경우

http://css-tricks.com/css-transparency-settings-for-all-broswers/

당신이 지금까지 작업을 얻을 수 있습니다 : 당신은 더 나은 브라우저 호환성에 관심이 있다면

.tinted { opacity: 0.8; } 

, 나는이 읽기 제안 IE7로 돌아 가기 (알고 계셨습니까?)

참고 : JGonzalezD가 아래에서 지적했듯이이 onl 배경색이 이미지 자체보다 일반적으로 어두우면 실제로 이미지가 어두워집니다. 이 기법은 특별히 이미지를 어둡게하고 싶지 않고 어떤 이유로 든 호버/포커스/다른 상태에서 강조 표시하려는 경우에도 유용 할 수 있습니다.

Answer 2

Webkit only solution

빠른 솔루션은 -webkit-mask-image 특성에 의존한다. -webkit-mask-image은 요소에 대한 마스크 이미지를 설정합니다.

이 방법 몇 개는 다음과 같습니다 분명히

• 는
• 가 :after 사이비 요소를 적용하기 위해 추가 래퍼가 필요합니다에만 웹킷 브라우저에서 작동, (IMG 태그 할 수 없습니다 :before/:after pseudo elements, grr)
• 추가 래퍼가 있기 때문에 IMG 태그 URL을 얻기 위해 attr(…) CSS 함수를 사용하는 방법을 모르므로 CSS에 별도로 하드 코딩됩니다.

이러한 문제를 해결할 수 있다면 가능한 해결책 일 수 있습니다. SVG 필터는 더욱 유연해질 것이며 Canvas 솔루션은 더욱 유연 해지고 광범위한 지원을 받게 될 것입니다 (SVG는 Android 2.x를 지원하지 않습니다).

Answer 3

나는 강아지의 실루엣 (검은 색)의 새로운 이미지를 만들고 나머지는 원래 이미지와 동일하게 만들 것이다.html에서는이 실루엣을 배경으로 래퍼 div를 추가합니다. 이제 원본 이미지를 반투명하게 만드십시오. 개가 더 어둡게되고 강아지의 배경이 그대로 유지됩니다. 마우스 오버시 원래 이미지의 불투명도를 100 %로 설정하여 호버 트릭을 할 수 있습니다. 당신이 그 위에 마우스를 가져 가면 개가 튀어 나옵니다!

스타일

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:} 
.original:hover{opacity:1} 

<div class="wrapper"> 
    <div class="img"> 
    <img src="original.png"> 
    </div> 
</div> 

Answer 4

쉬운 당신은의 실루엣 PNG로 같은 크기를 확인해야합니다

img { 
    filter: brightness(50%); 
}