CSS에서 배경 투명도를 설정하는 방법
- 王林앞으로
- 2020-08-29 16:06:443246검색
배경 투명도를 얻는 방법에는 여러 가지가 있습니다. 이 글에서는 다음 두 가지 방법을 소개합니다.
(권장 관련 튜토리얼: 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 영상 튜토리얼)
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를 사용하세요. 표준 브라우저에서는 아래와 같이 배경이 투명하고 텍스트가 불투명합니다.
그런 다음 투명한 배경과 불투명한 텍스트를 얻으려면 rgba를 사용하는 것이 좋습니다.
위 내용은 CSS에서 배경 투명도를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!