isolation 隔离属性允许创建新的堆叠上下文。
它可以与混合模式属性一起使用。
当使用背景混合模式时，不需要isolation隔离属性。
背景元素不会与它们背后的内容混合，因为这些元素本质上是孤立的。
当与同一元素上的转换属性的转换值一起使用时，隔离属性也可能看起来无效。
如果我们尝试使用平移值和位置属性的绝对值将元素水平和垂直居中，我们可能会遇到这种困难。
在 CSS 中，背景图像或者 <img> 的内容必须始终呈现到一个独立的组中。
| 初始值 | auto |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.Isolation =“isolate”; |
CSS isolation 属性值说明
| 值 | 描述 |
|---|---|
| auto | 即使属性设置为AUTO，也会在案例中创建堆叠上下文，并且将混合模型应用于元素。这是此属性的默认值。 |
| isolate | 在元素上创建堆叠上下文，并将该组隔离。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
isolation: auto | isolate | initial | inherit;
隔离属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
background-color: #ccc;
}
#isolation-example {
width: 300px;
height: 300px;
}
.c {
width: 100px;
height: 100px;
border: 1px solid #000;
padding: 10px;
mix-blend-mode: difference;
}
#isolation-example1 {
isolation: auto;
}
#isolation-example2 {
isolation: isolate;
}
</style>
</head>
<body>
<h2>Isolation 属性示例</h2>
<div id="isolation-example" class="a">
<div id="isolation-example1">
<div class="a c">isolation: auto;</div>
</div>
<div id="isolation-example2">
<div class="a c">isolation: isolate;</div>
</div>
</div>
</body>
</html>
具有混合模式属性的隔离属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #eee;
color: #555;
font-size: 1.1em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.isolation-example {
margin: 1em auto;
width: 100%;
max-width: 814px;
position: relative;
}
img {
width: 100%;
}
.isolation-example h1 {
position: absolute;
top: 5em;
color: white;
text-align: center;
font-size: 40px;
width: 100%;
text-transform: uppercase;
background-color: #000;
padding: .5em .25em;
mix-blend-mode: overlay;
}
</style>
</head>
<body>
<h2>Isolation 属性示例</h2>
<div class="isolation-example">
<img src="/tree.jpeg" alt="Yellow tree.">
<div class="element">
<h1>House</h1>
</div>
</div>
</body>
</html>
日期：2020-06-02 22:14:36 来源：oir作者：oir