CSS 블렌딩 모드-CSS 튜토리얼-php.cn

CSS 블렌딩 모드

高洛峰

풀어 주다： 2017-02-23 10:07:49

원래의

1665명이 탐색했습니다.

이전 단어

계단식 컨텍스트 z-index는 두 요소 중 어느 것이 사용자에게 더 가까운지에 대한 문제만 해결합니다. CSS 블렌딩 모드는 두 요소의 덮는 부분을 블렌딩하는 방법에 대한 문제를 다룹니다. 포토샵을 아시는 분들이라면 이 현상을 잘 아실텐데요. CSS3에는 믹싱 모드와 관련된 두 가지 속성이 있습니다: mix-blend-mode, background-blend-mode 이번 글에서는 CSS 믹싱 모드

Element Mix

Element Mix에 대해 자세히 소개하겠습니다. blend-mode는 두 요소 간의 블렌딩에 적용

mix-blend-mode

초기값: 일반

적용 대상: 모든 요소

상속: 없음

호환성: IE 브라우저, android4.4-지원되지 않음, Safari 및 IOS는 -webkit- 접두사를 추가해야 합니다.

계단식 컨텍스트를 생성하면 z-index 속성이 유효합니다.

배경 블렌딩

background 블렌딩 background-blend-mode는 요소의 여러 배경 이미지 또는 배경 이미지와 배경 간의 블렌드에 적용됩니다. 색상

배경 블렌드 모드

초기 값: 일반

적용 대상: 모든 요소

상속: 없음

호환성: IE 브라우저, Safari 및 IOS는 -webkit- 접두사

Isolation

을 추가해야 합니다. 격리의 기능은 주로 mix-blend-mode 속성과 함께 적용하기 위해 사용되는 스태킹 컨텍스트를 생성하는 것입니다. 특정 요소 또는 특정 요소 그룹에만 블렌드 모드

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