계단식 컨텍스트 z-index는 두 요소 중 어느 것이 사용자에게 더 가까운지에 대한 문제만 해결합니다. CSS 블렌딩 모드는 두 요소의 덮는 부분을 블렌딩하는 방법에 대한 문제를 다룹니다. 포토샵을 아시는 분들이라면 이 현상을 잘 아실텐데요. CSS3에는 믹싱 모드와 관련된 두 가지 속성이 있습니다: mix-blend-mode
, background-blend-mode
이번 글에서는 CSS 믹싱 모드
Element Mix에 대해 자세히 소개하겠습니다. blend-mode는 두 요소 간의 블렌딩에 적용
mix-blend-mode
초기값: 일반
적용 대상: 모든 요소
상속: 없음
값: 일반(일반) | 곱하기(곱하기) | 화면(색상 필터) | 어둡게(어둡게) | 컬러 번(색상 심화) | 부드러운 빛(부드러운 빛) | 제외(색조) | 🎜> | 초기 | 상속 | 해제
배경 블렌드 모드
초기 값: 일반 적용 대상: 모든 요소 상속: 없음 값: 일반 | 곱하기 | 화면 | 오버레이( 오버레이 | 어둡게 | 밝게 | 색상 닷지 | 색상 번 | 하드 라이트 | 소프트 라이트 | 차이( 차이) | 제외(제외) | 색조(색상) | 채도(채도) | 색상(색상) | 초기(초기) | 설정 해제(복원)호환성: IE 브라우저, Safari 및 IOS는 -webkit- 접두사
isolation
초기값: auto
적용 대상: 모든 요소 상속: 없음 값: auto | isolate (새 스태킹 컨텍스트 생성) | 초기 | 상속 | unset<style> body{background-color: gray;} .test1,.test2{display: inline-block;width: 100px;height: 100px;border:1px solid black;} .test2{isolation: isolate;} .in{width: 50px;height: 50px;background-color: red;mix-blend-mode: screen;} </style> </head> <body> <p class="test1"> <p class="in"></p> </p> <p class="test2"> <p class="in"></p> </p>스태킹을 생성하는 데 사용하지 않는 경우 문맥상
과
의 배경색은 투명하므로는 isolation: isolate
의 배경색과 섞여서 분홍색이 됩니다. .test1
을 사용한 후, .test2
은 .in
과 분리되어 <body>
의 배경과 섞이지 않아 원래의 붉은색을 유지하게 됩니다. isolation: isolate
.test2
<body>
의 역할은 <body>
의 역할이 stacking context, stacking context가 생성될 수 있는 한 격리 효과를 얻을 수 있으므로 마찬가지로 상대, 필터 및 기타 스타일도 유사한 효과를 얻을 수 있습니다.
더 많은 CSS 혼합 모드 관련 기사를 보려면, PHP 중국어 웹사이트를 주목해주세요! isolation: isolate