투명하게 - 불투명도 CSS는 IE8에서 작동하지 않습니다.




opacity (7)

CSS를 사용하여 jQuery 슬라이드 다운 섹션의 트리거 텍스트를 나타냅니다. 즉, 트리거 텍스트 위로 마우스를 가져 가면 커서가 포인터로 변경되고 트리거 텍스트의 불투명도가 감소되어 텍스트에 클릭 동작이 있음을 나타냅니다 .

Firefox와 Chrome에서는 잘 작동하지만 IE8에서는 불투명도가 변경되지 않습니다.

나는 성공하지 않고 다양한 CSS 설정을 시도했다.

예를 들어

HTML :

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS :

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

불투명도를 변경하는 Internet Explorer를 중지하는 이유는 무엇입니까? 참고 : 나는 다양한 다른 요소에 대해 CSS 문장의 순서를 바꾸고 IE 자체를 사용하는 방법을 시도했다. 나는 또한 사용을 시도했다.

-ms-filter: "alpha(opacity=75)";

그러나 성공하지 못했습니다.

나는 IE8에서 불투명도 수정을 시도하기 위해 물건을 다 써 버렸습니다.

어떤 아이디어?


CSS

나는 CSS-Tricks 에서 다음을 사용했다.

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

나침반

그러나 더 좋은 해결책은 Opacity Compass 믹스 인을 사용하는 것입니다. 필요한 것은 @include opacity(0.1); 브라우저 간 문제를 해결할 것입니다. 여기 에서 예제를 찾을 수 있습니다.



분명히 알파 투명도는 Internet Explorer 8의 블록 수준 요소에서만 작동합니다. display : block을 설정합니다.


위의 답변 중 아무 것도 나를 위해 일한 적이 없기 때문에 대신 DIV 태그에 투명한 배경 이미지를 제공 했으므로 모든 브라우저에서 완벽하게 작동했습니다.


이것을 설정할 때 (필자가 작성한 것과 똑같이) 내가 필요할 때 나를 도와 주었다.

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);


display: inline-block; 사용 display: inline-block; 이 문제를 해결하기 위해 IE8에서 작동합니다.

FWIW, opacity: 0.75 는 모든 표준 호환 브라우저에서 작동합니다.





opacity