집 > 기사 > 웹 프론트엔드 > CSS에서 배경 투명성을 얻는 세 가지 방법

CSS에서 배경 투명성을 얻는 세 가지 방법

王林앞으로: 2020-06-10 09:17:114966검색

CSS에서 배경 투명도를 얻는 방법에는 일반적으로 3가지가 있습니다. 다음은 이 세 가지 방법의 불투명도를 80%로 작성하는 방법입니다.

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

rgba(red, green, blue, alpha), alpha 값은 rgba(255,255,255,0.8)

IE 독점 필터 필터:Alpha(opacity=x)와 같이 0에서 1까지입니다. , x 값의 범위는 0부터 100까지입니다. 예: filter:Alpha(opacity=80)

(권장 비디오 튜토리얼: css 비디오 튜토리얼)

1. css3의 불투명도

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

사용 지침: 불투명도 요소를 설정하는 모든 하위 요소는 투명도와 함께 투명도를 갖습니다. 이는 일반적으로 이미지 또는 모듈의 전체 불투명도를 조정하는 데 사용됩니다

<!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에서 배경 투명성을 얻는 세 가지 방법

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

2. css3의 RGB

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에서 배경 투명성을 얻는 세 가지 방법

그런 다음 투명한 배경과 불투명한 텍스트를 얻으려면 rgba를 사용하는 것이 좋습니다.

CSS에서 배경 투명성을 얻는 세 가지 방법

관련 기사