CSS3의 불투명도 속성으로 인해 발생하는 계단식 순서 문제에 대한 솔루션-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 불투명도 속성으로 인해 발생하는 계단식 순서 문제에 대한 솔루션

高洛峰

Mar 13, 2017 pm 05:58 PM

css3종속

이 글에서는 주로 CSS3의 불투명도속성으로 인해 발생하는 스택 순서 문제를 해결하는 방법을 소개합니다. 주로 불투명도 속성 값이 1보다 작은 레이어가 다른 레이어를 덮는 문제에 중점을 둡니다.

을 참고할 수 있는 친구가 필요합니다. 최근 작업에서 페이지의 전체적인 투명성을 구현하기 위해 opacity 속성을 사용할 때 문제가 발견되었습니다. 두 레이어가 겹치는 경우 불투명도 속성이 있고 값이 1보다 작은 레이어가 다음 레이어를 덮어씁니다. 그래서 불투명도 정도를 확인하기 위해 실험을 해봤습니다.

웹 페이지의 계단식 규칙은 다음과 같습니다. 두 레이어 모두 정의 position 속성이 절대 또는 상대인 경우, 어느 레이어의 HTML 코드가 뒤에 배치되는지, 레이어가 맨 위에 표시됩니다. position 속성을 지정하고 z-index 속성을 설정한 경우 값이 큰 쪽이 맨 위에 오게 됩니다.

문제 발견

Z-index가 활성화되지 않은 일반 레이어의 경우 해당 레이어가 속성 값이 1보다 작은 불투명 속성을 사용하는 경우 레이어가 위에 표시됩니다. 데모를 만들어 보겠습니다. 코드는 다음과 같습니다.

 <!DOCTYPE html>   
 <html>   
 <head>   
 <title>带有 opacity 的层叠问题</title>   
 <style>   
 html{padding:40px;}   
 .dd{width:100px;height:100px;}   
a{background:red;}   

b{background:blue;margin-left:20px;margin-top:-80px;}   

c{background:green;margin-left:40px;margin-top:-80px;}   

</style>   
</head>   
<body>   
<p id=”a”></p>   
<p id=”b”></p>   
<p id=”c”></p>   
</body>   
</html>

html 파일로 저장하고 열면 정상적인 순서를 볼 수 있습니다
CSS3의 불투명도 속성으로 인해 발생하는 계단식 순서 문제에 대한 솔루션

이때 # 플러스 속성 opacity: 0.9 마법이 일어나 다른 두 레이어를 덮습니다
CSS3의 불투명도 속성으로 인해 발생하는 계단식 순서 문제에 대한 솔루션

다른 레이어(예: #c)도 다음으로 설정된 경우에만 1보다 작은 값 불투명도 값(예: 0.8) 뒤에 다음 #c는 #a를 덮는 일반 규칙을 설치할 수 있습니다.
CSS3의 불투명도 속성으로 인해 발생하는 계단식 순서 문제에 대한 솔루션

이렇게 하면 불투명도 속성이 1보다 작은 레이어가 추가되어 더 높은 수준으로 올라갑니다. 내부의 과학적 원리는 아직 파악하지 못했습니다. 어쩌면 작은 버그일 수도 있습니다. 하지만 때로는 이런 일이 일어나기를 원하지 않는 경우도 있습니다.

문제 해결

그렇다면 이 문제를 어떻게 해결해야 할까요? 앞에서 언급했듯이 일반적인 상황에서는 위치와 z-인덱스가 지정된 레이어가 일반 레이어보다 높은 수준을 갖습니다. 그러면 불투명도가 지정된 레이어는 위치가 지정된 레이어와 어떻게 비교됩니까? #b에 상대적인 위치를 추가하고 살펴보겠습니다. 이때 스타일코드는

 #a{background:red;opacity:0.9;}   
b{background:blue;margin-left:20px;margin-top:-80px;position:relative;}   

c{background:green;margin-left:40px;margin-top:-80px;opacity:0.8;}

저장하고 새로고침하면 다음과 같은 효과를 볼 수 있습니다.

CSS3의 불투명도 속성으로 인해 발생하는 계단식 순서 문제에 대한 솔루션

즉, 레이어의 상대 위치 속성을 사용한 후 해당 레벨을 불투명도와 동일하게 만들 수 있으며 이후에는 일반 정렬에 따라 계단식 표시가 수행됩니다. 실험에서는 절대 속성 값도 테스트했습니다. 결과는 상대 속성 값과 동일하게 작동합니다. #c의 opacity 속성을 취소하면 #c가 맨 아래 순위에 있음을 알 수 있습니다.
CSS3의 불투명도 속성으로 인해 발생하는 계단식 순서 문제에 대한 솔루션

아직 끝나지 않았습니다. 이전에 #b에 대해 position:relative 속성을 활성화했고 아직 z-index를 사용하지 않았습니다. #b의 z-index를 설정합니다(예: 100). 당연히 #b가 최상위 레벨이 됩니다.
CSS3의 불투명도 속성으로 인해 발생하는 계단식 순서 문제에 대한 솔루션

결론:

절대값과 상대값의 위치 속성 값을 사용하는 레이어는 일반 레이어 수준보다 높아집니다. 불투명도 속성이 1보다 작은 레이어도 일반 레이어보다 높고 지정된 위치의 레이어와 동일한 레이어이지만 z-index 속성을 지원하지 않으므로 지정된 위치의 레이어는 z를 사용할 수 있습니다. - 불투명도 속성이 1보다 작은 레이어를 덮는 인덱스 속성입니다.

위 내용은 CSS3의 불투명도 속성으로 인해 발생하는 계단식 순서 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사