CSS2 표준의 이미지 호버에 대한 알파 변경?

StackOverflow https://stackoverflow.com/questions/1173914

  •  19-09-2019
  •  | 
  •  

문제

내 이미지에 알파 효과를 추가하려고합니다. 이미지는 둥근 모서리 직사각형 모양입니다. CSS3에서 알파를 변경할 속성이 있다는 것을 알고 있지만 여전히 CSS2 인 W3C 표준을 준수하려고합니다.

내 질문을 올바르게 언급하지 않아서 죄송합니다. CSS2를 사용하여 이미지 위로 떠날 때 알파를 변경하려고했습니다. 100% 알파에 "배경 이미지"를 사용하고 50% 알파에 IMG 태그를 사용한다고 생각합니다. 이 작업을 수행하는 더 좋은 방법이 있습니까?

도움이 되었습니까?

해결책

이미지가 a PNG, 이미지에 알파를 직접 포함시킬 수 있습니다. 물론 이것은 필요할 것입니다 PNG 수정 IE6 스크립트.

그렇지 않으면 CSS를 사용하여 투명성을 설정할 수 있습니다.

편집 : 호버에서만 작동하도록 업데이트되면 IE6에서는 작동하지 않습니다.

img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}

다른 팁

웹 개발자가 투명한 효과를 구현하는 일반적인 방법은 부분적으로 투명한 PNG 파일을 배경으로 사용하는 것입니다.

div {
  background: #FFF url(img/bg.png) repeat top left;
}

PNG를 사용하면 예상대로 작동하지만 불투명도는 예상대로 작동하지 않습니다.

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

이것은 모든 어린이, 텍스트 및 모든 것을 포함하여 DIV 50% 투명성을 제공합니다. 불투명도 설정을 가지고 놀아야 할 것과 같이 결과를 얻을 수 있습니다.

IE6에 대해 약간 더 나쁜 사용자 경험을 할 수 있다면 훨씬 간단한 수정은 모든 최신 브라우저에 알파 트랜스 펜트 이미지를 사용하고 투명성 (또는 단 하나의 색)이없는 이미지를 IE6에 보내는 것입니다. 소수의 사용자에게는 조금 더 나빠 보이지만 유지 보수가 훨씬 적습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top