CSS에서 이미지의 반투명 효과를 얻는 방법

CSS를 사용하여 이미지의 반투명도를 얻는 방법: [style="-moz-opacity:0.5";]와 같은 불투명도 속성을 통해 설정할 수 있습니다. 불투명도 속성은 요소의 불투명도 수준을 설정하는 데 사용되며 구문은 [opacity:value|inherit;]입니다.

이 기사의 환경:

• windows10, css3

• 모든 브랜드의 컴퓨터에 적용 가능

속성 소개:

불투명도 속성은 요소의 산성 수준.

(학습 영상 공유: css 영상 튜토리얼)

구문:

opacity: value|inherit;

속성 값:

• value 불투명도를 지정합니다. 0.0(완전 투명)부터 1.0(완전 불투명)까지입니다.

• inherit는 상위 요소의 불투명도 속성 값을 상속해야 합니다.

구현 코드는 다음과 같습니다.

이 효과는 IE와 Mozilla 브라우저 모두에서 작동할 수 있습니다. 코드는 다음과 같습니다

<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">

IE에서는 "필터"를 통해 투명도 "불투명도"를 정의해야 하지만, Mozilla에서는 "불투명도"가 직접 구문 분석될 수 있으므로 이 효과를 두 브라우저 모두에서 지원하려면 두 설정을 모두 추가해야 합니다.

IE 설정: this.filters.alpha.opacity=50; Mozilla 설정: this.style.MozOpacity=0.5.

관련 권장 사항: CSS 튜토리얼

위 내용은 CSS에서 이미지의 반투명 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!