CSS에서 반투명 스타일을 처리하는 방법 공유

프로젝트를 하다 보면 그림, 텍스트, 컨테이너, 배경 등 반투명도를 설정해야 하는 상황이 자주 발생합니다. 사용할 때마다 어떻게 해야 하는지 잊어버리곤 합니다. 이제 요약을 할 시간이 생겼습니다. 나만의 편리함을 누릴 수 있고, 필요한 경우 모두와 공유할 수도 있습니다.

1. 요소 컨테이너는 투명합니다.

 .div{
opacity: 0.5;   /* Firefox、Chorme、Opera等主流浏览器识别 */
filter:alpha(opacity=50);   /* IE6及以上IE浏览器识别 */
 }

지침:

1. 불투명도:*는 0-1 사이의 값을 가지며 완전 투명에서 불투명으로 증가하고 1을 초과하면 기본값은 불투명으로 설정됩니다. :alpha( Opacity= *) 값은 0-100 사이이며 위와 동일합니다.

3. 이 속성을 사용한 후에는 요소 컨테이너의 모든 하위 요소가 상속됩니다. 즉, 모두 반투명해집니다.

2. 요소 배경은 투명합니다

 .div{
     background: rgba(0,0,0,.5);    /* Firefox、Chorme、Opera等主流浏览器识别 */ 
     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#7f000000, endColorStr=#7f000000);   /* IE6及以上IE浏览器识别 */
 }

지침:

1. background:rgba(m n) 여기서 m은 RGB 색상 값이고, n은 투명도이며 값은 1-100입니다. 위의 첫 번째 ;

2.startColorStr=m, endColor=n 여기서 m과 n은 두 부분으로 구성되며 처음 2비트는 투명도이고 마지막 6비트는 16개의 색상 값입니다. 예를 들어 7f는 투명도 0.5를 나타내고 000000은 검정색입니다(000으로 축약할 수 없음).

3 두 번째 점에서 m=n이면 균일하게 투명하고 ≠이면 그라데이션 투명입니다. 아래는 rgb 투명도 값 형식의 투명도 데이터에 해당하는 처음 두 값의 집합입니다. IEfilter 값:

0.1 - 19 | 0.3 - 0.4 - 66 | 0.5 -- 7f | 0.6 -- 99 | 0.7 -- b2 | 0.8 -- c8 | 0.9 -- e5 |

3. 그림이 투명합니다

설명: 실제로는 IE6용입니다. IE7 이상 브라우저는 반투명 이미지를 직접 지원합니다. 방법은 여러 가지가 있는데, 전문가들이 대략 7~8가지 방법을 정리했습니다. 제가 주로 사용하는 방법은 다음과 같습니다.

1. 먼저 온라인에서 png.js를 다운로드하세요.

2. 페이지 하단에서 본문 닫는 태그와 html 닫는 태그 사이에 다음 단락을 로드합니다.

<!--[if lte IE 6]>
<script src="js/png.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix(&#39;img, .logo,.ico&#39;);
</script>
<![endif]-->

3 그런 다음 경로가 잘못 작성되지 않았는지 확인하세요. 마지막으로 DD_belatedPNG.fix("")에 반투명해야 하는 이미지 요소 이름이나 클래스 및 ID 이름을 추가하기만 하면 됩니다.

위 내용은 CSS에서 반투명 스타일을 처리하는 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!