HTML에서 배경색인 경우 rgba() 함수를 사용하거나 불투명도 속성을 사용하여 배경 이미지인 경우 불투명도 속성과 "filter:opacity(%)를 사용할 수 있습니다. " 스타일을 사용하여 이미지 투명도를 설정합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
1 배경색의 투명도 설정 - rgba() 함수 또는 불투명도 속성 사용
예 1:
<style> #p1 {background-color:rgb(255,0,0,0.3);} #p2 {background-color:rgb(0,255,0,0.3);} #p3 {background-color:rgb(0,0,255,0.3);} #p4 {background-color:rgb(192,192,192,0.3);} #p5 {background-color:rgb(255,255,0,0.3);} #p6 {background-color:rgb(255,0,255,0.3);} </style> </head> <body> <p>RGB 颜色,并使用透明度:</p> <p id="p1">红色</p> <p id="p2">绿色</p> <p id="p3">蓝色</p> <p id="p4">灰色</p> <p id="p5">黄色</p> <p id="p6">樱桃色</p> </body>
Rendering:
예 2:
<style> .demo{ width: 280px; height: 140px; margin: 50px auto; } .demo1,.demo2{ width: 120px; height: 120px; margin: 10px; float: left; background:#2DC4CB; } .demo1{ opacity:1; } .demo2{ opacity:0.5; } </style> </head> <body> <div class="demo"> <div class="demo1"> <p>背景色不透明,文字不透明!</p> </div> <div class="demo2"> <p>背景色透明,文字也透明!</p> </div> </div> </body>
Rendering:
2. 배경 이미지 투명도를 설정합니다. 불투명도 속성과 "필터:불투명도(%)" 스타일을 사용합니다.
예 1:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ width: 300px; height: 200px; background-image: url(img/1.jpg); background-size: 300px; } .div1{ -webkit-filter: opacity(50%); /* Chrome, Safari, Opera */ filter: opacity(50%); } .div2{ -webkit-filter: opacity(20%); /* Chrome, Safari, Opera */ filter: opacity(20%); } </style> </head> <body> <div> <p>原图:</p> </div> <div class="div1"> <p>透明度为50%:</p> </div> <div class="div2"> <p>透明度为20%:</p> </div> </body> </html>
예 2:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ width: 300px; height: 200px; background-image: url(img/1.jpg); background-size: 300px; } .div1{ opacity: 0.5; } .div2{ opacity: 0.2; } </style> </head> <body> <div> <p>原图:</p> </div> <div class="div1"> <p>透透明度为0.5:</p> </div> <div class="div2"> <p>透明度为02:</p> </div> </body> </html>
학습 영상 공유: css 영상 튜토리얼, "html 영상 튜토리얼")
위 내용은 HTML에서 배경 투명도를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!