CSS에서 배경 투명도를 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 배경 투명도를 설정하는 방법

王林

풀어 주다： 2020-08-29 16:06:44

앞으로

3266명이 탐색했습니다.

CSS에서 배경 투명도를 설정하는 방법

배경 투명도를 얻는 방법에는 여러 가지가 있습니다. 이 글에서는 다음 두 가지 방법을 소개합니다.

(권장 관련 튜토리얼: CSS 튜토리얼)

css3의 불투명도:x, x의 값은 0에서 1까지입니다. , 불투명도: 0.8

rgba(red, green, blue, alpha) of css3, alpha 값은 0에서 1입니다(예: rgba(255,255,255,0.8)

1). css3의 불투명도

호환성: IE6, 7, 8은 지원되지 않지만 IE9 이상 및 표준 브라우저에서는 지원됩니다

사용 지침: 불투명도 요소를 설정하는 모든 하위 요소는 일반적으로 이미지의 전반적인 불투명도를 조정하는 데 사용됩니다. module

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明度</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;
  filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    
 
<div class="demo">
    <p>背景透明，文字也透明</p>
</div>
</body>
</html>

로그인 후 복사

불투명도를 사용한 후에는 아래와 같이 전체 모듈이 투명해집니다.

CSS에서 배경 투명도를 설정하는 방법

그러면 "투명한 배경, 불투명한 텍스트"를 얻기 위해 불투명도를 사용하는 것은 바람직하지 않습니다.

(추천 영상 튜토리얼: css 영상 튜토리얼)

2. css3의 rgba

소위 RGBA 컬러는 이름에서 알 수 있듯이 R+G+B+A의 컬러이며, 좀 더 구체적으로 말하면, 그것은 빨간색+녹색+파란색+알파입니다. 빨간색 + 녹색 + 파란색 + 알파 투명 색상으로 변환된 색상입니다.

background:rgba(200, 54, 54, 0.5);

로그인 후 복사

그 중 반투명함을 나타내는 0.5 앞의 0은 생략 가능하며, 직접 .5도 허용됩니다.

호환성: IE6, 7, 8은 지원되지 않으며 IE9 이상은 표준 브라우저에서 지원됩니다.

IE8 브라우저가 rgba를 지원하지 않는 문제를 해결하는 방법:

background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

로그인 후 복사

사용 지침: 색상의 불투명도 설정 , 일반적으로 사용됨 배경색, 색상, 상자 그림자 등의 불투명도를 조정합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
  background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    
<div class="demo">
    <p>背景透明，文字也透明</p>
</div>
</body>
</html>

로그인 후 복사

배경색으로 rgba를 사용하세요. 표준 브라우저에서는 아래와 같이 배경이 투명하고 텍스트가 불투명합니다.

CSS에서 배경 투명도를 설정하는 방법