CSS 블렌딩 모드
- 高洛峰원래의
- 2017-02-23 10:07:491648검색
이전 단어
계단식 컨텍스트 z-index는 두 요소 중 어느 것이 사용자에게 더 가까운지에 대한 문제만 해결합니다. CSS 블렌딩 모드는 두 요소의 덮는 부분을 블렌딩하는 방법에 대한 문제를 다룹니다. 포토샵을 아시는 분들이라면 이 현상을 잘 아실텐데요. CSS3에는 믹싱 모드와 관련된 두 가지 속성이 있습니다: mix-blend-mode, background-blend-mode 이번 글에서는 CSS 믹싱 모드
Element Mix
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