isolation

åºçº¿ å¹¿æ³å¯ç¨

å°è¯ä¸ä¸

isolation: auto;

isolation: isolate;

<section class="default-example" id="default-example">
  <div class="background-container">
    <div id="example-element">
      <img src="/shared-assets/images/examples/firefox-logo.svg" />
      <p><code>mix-blend-mode: multiply;</code></p>
    </div>
  </div>
</section>

.background-container {
  background-color: #f4f460;
  width: 250px;
}

#example-element {
  border: 1px solid black;
  margin: 2em;
}

#example-element * {
  mix-blend-mode: multiply;
  color: #8245a3;
}

è¯¥å±æ§ä¸ mix-blend-mode å z-index ç»åä½¿ç¨æ¶å°¤å¶æç¨ã

è¯æ³

css

/* å³é®åå¼ */
isolation: auto;
isolation: isolate;

/* å¨å±å¼ */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;

isolation å±æ§æå®ä¸ºä¸åå³é®åå¼ä¹ä¸ã

å¼

auto: åªæå½åºç¨äºåç´ çæä¸ªå±æ§éè¦æ¶ï¼æä¼åå»ºä¸ä¸ªæ°çå±å ä¸ä¸æã
isolate: å¿é¡»åå»ºæ°çå±å ä¸ä¸æã

å½¢å¼å®ä¹

åå§å¼	`auto`
éç¨åç´	All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
æ¯å¦æ¯ç»§æ¿å±æ§	å¦
è®¡ç®å¼	as specified
å¨ç»ç±»å	Not animatable

å½¢å¼è¯æ³

isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     |
  isolate

ç¤ºä¾

å¼ºå¶ä¸ºåç´ åå»ºæ°çå±å ä¸ä¸æ

HTML

html

<div class="big-square ">
  <div class="isolation-auto">
    <div class="small-square">auto</div>
  </div>
  <div class="isolation-isolate">
    <div class="small-square">isolate</div>
  </div>
</div>

CSS

css

.isolation-auto {
  isolation: auto;
}

.isolation-isolate {
  isolation: isolate;
}

.big-square {
  background-color: rgb(0, 255, 0);
  width: 200px;
  height: 210px;
}

.small-square {
  background-color: rgb(0, 255, 0);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}