CSS에서 배경색 반투명성을 얻는 두 가지 방법

페이지 레이아웃 시 사용자에게 다양한 시각적 효과를 주기 위해 div의 배경색을 반투명으로 설정해야 합니다. 설정하는 방법을 알고 있나요?

다음으로 div의 배경색을 반투명하게 만드는 두 가지 방법을 사용하는 방법과 두 가지 방법의 장단점에 대해 이야기해 보겠습니다. 관심있는 친구들이 오셔서 구경하셔도 좋을 것 같아요. 도움이 되셨으면 좋겠습니다.

추천 매뉴얼: css 온라인 매뉴얼

먼저, 익숙한 CSS 속성 opacity를 사용하여 div의 배경색을 변경합니다.

설명:

밖의 큰 div의 배경색은 노란색이고, 안쪽의 작은 div의 배경색은 빨간색입니다. 이제 큰 div의 배경색을 반투명하게 설정해야 합니다. opacity 속성 값을 0.5 로 하면 코드는 다음과 같습니다.

HTML 부분:

<div class="aa">
    <div class="bb">我是内容</div>
</div>

CSS 부분:

.aa{
	width: 250px;
	height: 250px;
	background: yellow;				
	opacity: 0.5;
    }
.bb{
	width: 150px;
	height: 150px;
	background: red;
    }

Rendering:

사진처럼 배경색은 확실히 반투명해졌는데 배경이 그리고 내부의 작은 div의 텍스트가 반투명해져서 원하는 효과가 아닐 수 있으므로 일반적으로 이 방법을 사용하지 않습니다. 물론, 페이지 레이아웃 중에 div의 모든 내용을 투명하게 하려면 불투명도를 사용하세요.

다음으로 background-color:rgba(0,0,0,0~1)라는 또 다른 방법을 사용합니다. 이 방법을 사용하면 div의 콘텐츠에 영향을 주지 않고 div 배경만 투명하게 설정됩니다.

추천 관련 기사: ​
1. 웹 디자인에서 CSS 배경을 투명하게 만드는 방법은 무엇인가요? (예)
2.CSS에서 투명도를 설정하는 방법은 무엇인가요? 두 가지 투명도 방법 설정(코드 인스턴스)
관련 비디오 튜토리얼:
1.CSS 비디오 튜토리얼-Jade Girl Heart Sutra Edition

HTM 부분, OPACity를 RGBA로 바꾸기만 하면 됩니다.

코드는 다음과 같습니다:

.aa{
	width: 250px;
	height: 250px;
	background-color: rgba(255,255,0,0.5);
    }
.bb{
	width: 150px;
	height: 150px;
	background: red;
    }

Rendering:

대형 div의 투명도가 변경된 후에는 배경과 내부 텍스트에 아무런 영향을 미치지 않는다는 것이 그림에서 분명합니다. 그래서 우리는 일반적으로 배경색을 투명하게 설정하기 위해 background-color:rgba(0,0,0,0~1) 을 사용합니다.

위에서는 div 배경색의 투명도를 변경하는 두 가지 방법을 소개합니다. 각 방법에는 자신의 필요에 따라 가장 적합한 방법을 찾아 더 많이 연습해야 합니다. 그들의 이해가 도움이 되기를 바랍니다.

위 내용은 CSS에서 배경색 반투명성을 얻는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!