>  기사  >  웹 프론트엔드  >  하위 요소에 영향을 주지 않고 CSS에서 투명도를 설정하는 방법은 무엇입니까? 모든 브라우저 작성 방법과 호환 가능

하위 요소에 영향을 주지 않고 CSS에서 투명도를 설정하는 방법은 무엇입니까? 모든 브라우저 작성 방법과 호환 가능

云罗郡主
云罗郡主앞으로
2018-10-18 15:58:223504검색

이 기사가 제공하는 내용은 이에 관한 것이며 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

하위 요소에 영향을 주지 않고 CSS에서 투명도를 설정하는 방법은 무엇입니까? 모든 브라우저 작성 방법과 호환 가능

<body>
<p style="background-color:rgba(0,255,0,0.2);"> 显示文字 
</p> 
</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진수 투명도입니다. 마지막 6자리는 16진수 색상입니다.

형식은 #AARRGGBB 입니다. AA, RR, GG 및 BB는 16진수 양의 정수입니다. 값 범위는 00 - FF입니다. RR은 빨간색 값을 지정하고, GG는 녹색 값을 지정하고, BB는 파란색 값을 지정합니다. #RRGGBB 색상 단위를 참조하세요. AA는 투명성을 지정합니다. 00은 완전히 투명합니다. FF는 완전히 불투명합니다. 값 범위를 벗어난 값은 기본값으로 복원됩니다.

2자리 투명도 변환 방법: x=알파*255, 계산된 결과 x를 16진수로 변환하면 됩니다.

js를 16진수로 변환하는 방법: x.toString(16)

예: 위의 0.25 투명도를 IE의 AA 투명도로 변환: var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40

예: 입력에 대한 투명도 설정은 하위 요소에 영향을 주지 않습니다(IE8과 호환 가능)

<!DOCTYPE html>
<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>

위 내용은 모두 정확합니다. 소개, CSS 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 하위 요소에 영향을 주지 않고 CSS에서 투명도를 설정하는 방법은 무엇입니까? 모든 브라우저 작성 방법과 호환 가능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제