집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 불투명도를 구현하는 완전한 코드

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

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

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

|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 불투명도를 구현하는 완전한 코드

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

관련 기사