From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/mix-blend-mode/index.html | 661 ++++++++++++++++++++++++++ 1 file changed, 661 insertions(+) create mode 100644 files/zh-cn/web/css/mix-blend-mode/index.html (limited to 'files/zh-cn/web/css/mix-blend-mode') diff --git a/files/zh-cn/web/css/mix-blend-mode/index.html b/files/zh-cn/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..97c0590e1e --- /dev/null +++ b/files/zh-cn/web/css/mix-blend-mode/index.html @@ -0,0 +1,661 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +translation_of: Web/CSS/mix-blend-mode +--- +

{{CSSRef()}}

+ +

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

语法

+ +
mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

值

+ +
+
{{cssxref("<blend-mode>")}}
+
表示应该应用的混合模式。
+
+ +

形式定义

+ +

{{cssinfo}}

+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +

不同mix-blend-mode值的效果

+ + + +
{{EmbedLiveSample("Effect_of_different_mix-blend-mode_values", "100%", 1600, "", "", "example-outcome-frame")}}
+ +

HTML中使用 mix-blend-mode

+ +

HTML

+ +
<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>
+ +

CSS

+ +
.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  position: relative;
+}
+ +

Result

+ +

{{EmbedLiveSample("Using_mix-blend-mode_with_HTML", "100%", "180")}}

+ +

SVG中使用 mix-blend-mode

+ +

SVG

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +

CSS

+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
+
+ +

Result

+ +

{{EmbedLiveSample("Using_mix-blend-mode_with_SVG", "100%", "180")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Initial specification.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

另见

+ + -- cgit v1.2.3-54-g00ecf