>  기사  >  웹 프론트엔드  >  CSS3 불투명도를 구현하는 완전한 코드

CSS3 불투명도를 구현하는 완전한 코드

高洛峰
高洛峰원래의
2017-03-20 10:45:282643검색

투명도는 어떻게 설정하나요? 불투명 속성을 정의하면 모든 요소를 ​​반투명하게 만들 수 있습니다. 불투명 속성의 기본 구문은 다음과 같습니다.

|inherit

는 값 설명을 취합니다:

1. |는 부동 소수점 숫자와 단위 식별자로 구성된 길이 값입니다. 음수일 수 없으며 기본값은 1입니다. 불투명도 값이 1이면 요소가 완전히 불투명하고, 값이 0이면 요소가 완전히 투명하고 보이지 않습니다.

2. 상속이란 상속, 즉 상위 요소의 불투명도를 상속한다는 의미입니다.

3. IE 브라우저의 경우 전용 속성 필터를 사용하여 호환 가능합니다. 필터: 알파(알파=값);.

예: 라이트박스 광고 배경 천 디자인

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>opacity</title>  
<style type="text/css">  
body {   
    margin:0;   
    padding:0;   
}   
p { position:absolute; }   
.bg {   
    width:100%;   
    height:100%;   
    background:#000;   
    opacity:0.7;   
    filter:alpha(opacity=70);   
}   
.lightbox {   
    left:50px;   
    top:50px;   
}   
</style>  
</head>  
  
<body>  
<p class="web"><img  src="images/web_bg_9.jpg"    style="max-width:90%"  style="max-width:90%" / alt="CSS3 불투명도를 구현하는 완전한 코드" ></p>  
<p class="bg"></p>  
<p class="lightbox"><img  src="images/web_bg_10.png"    style="max-width:90%" / alt="CSS3 불투명도를 구현하는 완전한 코드" ></p>  
</body>

시연 렌더링:

CSS3 불투명도를 구현하는 완전한 코드

관련 기사:

CSS는 요소를 반투명하게 설정

CSS3 튜토리얼(8): CSS3 투명성 가이드

CSS3에서 사용 RGBa를 이용한 투명도 조정 예시

위 내용은 CSS3 불투명도를 구현하는 완전한 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.