css 투명도 설정은 하위 요소에 영향을 주지 않습니다
5242 단어 css
<body>
<div style="background-color:rgba(0,255,0,0.2);">
div>
body>RGBA를 통해 투명도를 설정하고 최신 브라우저만 지원하며 IE9+를 지원하며 RGBA의 알파 채널을 통해 설정할 수 있습니다.세 번째 값은 rgb의 색 값이고 마지막 투명도 값은 0~1이며 값이 작을수록 투명합니다.
모든 브라우저 쓰기 호환:
background-color:rgba(0,0,0,0.25);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);주의: startColorStr와 endColorStr의 값입니다. 앞의 두 자리는 16진수 투명도이고, 뒤의 여섯 자리는 16진수 색입니다.
형식은 #AARRGGBB입니다.AA, RR, GG, BB는 16진수 양의 정수입니다.범위는 00-FF입니다.RR은 빨간색, GG는 녹색, BB는 파란색을 지정합니다. #RRGGBB 색상 단위를 참조하십시오.AA는 투명도를 지정합니다.00은 완전 투명.FF는 완전히 불투명하다.범위가 초과된 값은 기본값으로 복원됩니다.
2위 투명도의 환산 방법: x=alpha*255, 계산된 결과 x를 16진법으로 변환하면 됩니다.
js 환산 16진법: x.toString(16)
예를 들어 위의 0.25 투명도, IE의 AA 투명도로 환산: var a = 0.25 * 255 = 63.75 ~ = 64;a.toString(16) = 40
예: input에 투명도를 설정하면 하위 요소에 영향을 주지 않습니다(IE8 호환)
<head>
<meta charset="utf-8"/>
<style type="text/css">
body{margin:0;padding:0;}
.div_content{
background: url("1.gif") no-repeat;
/* input ， 。*/
width: 200px;
height: 200px;
}
.div_content>input{
outline: none;
border: none;
background-color: transparent;
/* ， 。（ ， ：span ）*/
background-color: rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);
}
style>
head>
<body>
<div class="div_content">
<input type="text" size="20"/>
div>
body>
html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
