From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/mix-blend-mode/index.html | 651 +++++++++++++++++++++++++++++ 1 file changed, 651 insertions(+) create mode 100644 files/ko/web/css/mix-blend-mode/index.html (limited to 'files/ko/web/css/mix-blend-mode') diff --git a/files/ko/web/css/mix-blend-mode/index.html b/files/ko/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..069bb0122f --- /dev/null +++ b/files/ko/web/css/mix-blend-mode/index.html @@ -0,0 +1,651 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +tags: + - CSS + - CSS Property + - Reference +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>")}}
+
적용할 혼합 모드.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

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

HTML 예제

+ +
<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>
+ +
.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;
+}
+ +

{{EmbedLiveSample("HTML_예제", "100%", "180")}}

+ +

SVG 예제

+ +

다음은 이전의 예제를 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>
+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
+
+ +

{{EmbedLiveSample("SVG_예제", "100%", "180")}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Initial definition
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

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