CSS 이미지의 투명도를 설정하는 방법

CSS에서는 불투명도 속성을 통해 이미지 투명도를 설정할 수 있습니다. 이 속성의 사용 구문은 "opacity:value|inherit;"입니다. 여기서 매개변수 값은 불투명도를 지정하고 상속은 불투명도 속성의 값을 나타냅니다. 상위 요소에서 상속되어야 합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

불투명 속성은 요소의 불투명도 수준을 설정합니다.

Syntax

opacity: value|inherit;

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

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

CSS에서 opacity 속성을 사용하여 이미지의 투명도를 설정하는 예를 살펴보겠습니다.

css：
.opacity1, .opacity2, .opacity_img { display: inline-block; }
.opacity1 { filter: Alpha(opacity=0); }
.opacity2 { filter: Alpha(opacity=50); }
.opacity_img { filter: Alpha(opacity=100); }
:root .opacity1 { opacity: 0; filter: none; }
:root .opacity2 { opacity: .5; filter: none; }
:root .opacity_img { opacity: 1; filter: none; }
html：
<p>
    <a href="#" class="opacity2">
        <img class="opacity_img" src="
        " />
    </a>
</p>
<p>
    <a href="#" class="opacity2">
        <img  class="opacity2" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" / alt="CSS 이미지의 투명도를 설정하는 방법" >
    </a>
</p>

Rendering:

참고:

현재 주류 브라우저는 opacity:value 작성 방법을 지원하며 값은 다음과 같습니다. 0-1. 0은 완전히 투명하고, 1은 완전히 불투명합니다.

그러나 이 쓰기 방법은 IE8 및 이전 버전에서는 지원되지 않으므로 필터를 통해 해결할 수 있습니다: 필터:알파(불투명도=값), 값 범위는 0-100, 0은 완전히 투명하고 100은 완전히 불투명합니다. 위의 예와 같습니다.

【추천 학습: css 동영상 튜토리얼】

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