CSS에서 텍스트 불투명도가 아닌 배경색에만 불투명도를 설정하십시오.

CSS에서는 CSS "배경" 속성을 사용하여 특정 HTML 요소의 배경을 설정할 수 있습니다. 때로는 HTML 요소의 내용에 영향을 주지 않고 배경색의 불투명도를 줄여야 할 수도 있습니다.

"Background Color" 속성에 색상 값을 할당하면서 알파 변수의 값을 줄여 배경색의 불투명도를 줄일 수 있습니다.

문법

사용자는 다음 구문을 따라 CSS의 텍스트가 아닌 배경색에만 불투명도를 설정할 수 있습니다.

으아아아

사용자는 'rgba' 또는 'hsla'를 사용하여 배경색을 설정할 수 있습니다. 여기서 'a'는 값이 0에서 1 사이인 알파 불투명도를 나타냅니다.

예 1

아래 예에서는 HTML div 요소를 생성하고 "배경" 속성을 사용하여 배경색을 설정했습니다. 배경색을 설정하기 위해 "rgba" 값을 사용합니다. 사용자가 출력에서 ​​관찰할 수 있는 불투명도가 "0.1"인 배경에 "빨간색" 색상을 설정했습니다.

으아아아

예 2

아래 예에서는 "배경색" CSS 속성을 사용하여 HTML div 요소의 배경을 설정합니다. 또한 배경에는 "hsla" 값을 사용하고 알파 불투명도 값은 "0.2"로 사용합니다.

사용자는 불투명도 값을 0에서 1 사이로 늘리거나 줄이고 배경색 변경을 확인할 수 있습니다.

으아아아

예 3

배경 div를 콘텐츠 div에서 분리하고 div 요소에 대해 불투명도가 낮은 배경색을 설정할 수 있습니다.

여기에 상위 div가 있습니다. 상위 div에는 배경 및 콘텐츠 div가 있습니다. 배경 및 콘텐츠 div는 상위 div와 크기가 동일합니다. 두 div 요소의 z-index 속성을 설정하여 배경 div 위에 콘텐츠 div를 표시할 수 있습니다.

나중에 CSS “불투명도” 속성을 사용하여 배경 div의 불투명도를 낮출 수 있습니다. 이 방법으로 배경 div를 콘텐츠 div 아래에 배치하고 배경 div의 불투명도를 조정할 수 있습니다.

으아아아

사용자는 텍스트나 div 콘텐츠의 불투명도에 영향을 주지 않고 배경색의 불투명도를 설정하는 방법을 배웠습니다. 사용자는 "rgba" 또는 "hsla" 값을 사용할 때 색상의 불투명도를 줄일 수 있습니다. 사용자가 배경으로 이미지나 기타 콘텐츠를 가지고 있는 경우 배경과 콘텐츠에 대해 별도의 div를 만들고 배경 div의 불투명도를 낮출 수 있습니다.

위 내용은 CSS에서 텍스트 불투명도가 아닌 배경색에만 불투명도를 설정하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!