HTML에서 투명도를 설정하는 방법

html에서 투명도를 설정하는 방법: 1. "배경색:rgba(0,152,50,0.7);"을 통해 불투명도를 설정합니다. 2. 반투명 입자 이미지 또는 그라데이션 반투명 PNG 이미지를 사용합니다. 3. 투명도 및 배경 색상을 사용합니다. 달성할 배경 이미지입니다.

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

HTML/CSS 태그 투명 효과 구현

HTML+CSS 프로그래밍에서는 일반적으로 RGBA, PNG 및 CSS 필터를 사용하여 반투명 배경을 얻는 세 가지 방법이 있습니다.

방법 1.

첫 번째는 H5에서 투명한 배경색을 지원하는 HTML5 투명도인데, 아쉽게도 H5의 투명한 배경색은 rgba 쓰기만 지원하고 16진수는 지원하지 않습니다. 다음과 같이 작성됩니다.

background-color:rgba(0,152,50,0.7);// -->70%的不透明度

background-color:transparent;支持完全透明

기존 브라우저에서 IE 브라우저의 고유성은 일부 투명도 설정에서 불확실한 요소이기도 합니다

일반적으로 말해서 Firefox, Webkit 및 Khtml 캠프에서 투명성을 달성하는 방법은 IE9+ 및 더 큰 브라우저를 포함하여 매우 간단합니다. IE9보다 위의 HTML5 설정을 사용하여 투명도를 설정하세요. 그러나 이 방법은 IE9 이하의 브라우저에서는 전혀 유효하지 않습니다.

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

방법 2

두 번째는 반투명 입자 사진, 패턴 또는 그라데이션 반투명 PNG 사진을 사용하는 것입니다. 방법은 호환성입니다. IE6에서 PNG의 불투명도를 수정하기 위해 플러그인을 사용해야 하는 버그를 제외하면 지원이 매우 좋습니다. 크기는 H5에서도 설정할 수 있습니다. 극단적으로 로드하는 이미지 수가 적을수록 좋습니다.

(입자: 투명도가 균형 잡힌 이미지를 5px * 5px 이하로 자르면 로딩 속도가 훨씬 빨라집니다.)

background:url(path/my_png_bg.png) no-repeat center center scroll;

방법 3.

세 번째 방법은 투명도를 활용하는 것입니다. + 달성할 배경색 또는 배경 이미지.

background-color:rgb(0,152,50);
opacity:0.7;

background:url(path/my_bg.jpg) no-repeat center center scroll;
opacity:0.7;

그런데 문제가 발생합니다. IE6-IE8은 불투명도를 전혀 지원하지 않으므로 IE의 필터를 고려해야 합니다

IE에는 많은 필터가 있으며 그 중 알파 채널을 사용하여 불투명도를 설정합니다

filter:(opactity=70)

그래서 위의 솔루션은 다음과 같이 수정됩니다

background-color:rgb(0,152,50);
opacity:0.7;
filter:alpha(opacity=70);

background:url(path/my_bg.jpg) no-repeat center center scroll;
opacity:0.7;
filter:alpha(opacity=70);

참고: 불투명도 또는 알파 값은 "비" 투명도를 강조합니다

요약하자면 세 번째 옵션을 사용하는 것이 좋습니다.

개발 실습

	
		<meta>
		<title>Opacity</title>
		<meta>

		<style>
			*{
				padding: 0px;
				margin:0px;
			}
			.mainbox{
				width: 200px;
				height: 200px;
				clear: both;
				overflow: hidden;
				margin: 100px auto 0px auto;
				background-color: #f06;
			}
			.sub-mainbox
			{
				width: 250px;
				height: 200px;
				margin: -50px auto 0px auto;
				border:1px solid white;
				border-radius: 5px;
				/**background-color:rgb(0,152,50);**/
				background:url(path/my_bg.jpg) no-repeat center center scroll;
				opacity: 0.7;
				filter:alpha(opacity=70);
			}
		</style>
	
	

		<p>
			
		</p>

		<p>
			
		</p>

	

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