diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/css/mix-blend-mode | |
parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip |
initial commit
Diffstat (limited to 'files/de/web/css/mix-blend-mode')
-rw-r--r-- | files/de/web/css/mix-blend-mode/index.html | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/files/de/web/css/mix-blend-mode/index.html b/files/de/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..59efbddadd --- /dev/null +++ b/files/de/web/css/mix-blend-mode/index.html @@ -0,0 +1,97 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +tags: + - CSS + - CSS Compositing + - CSS Eigenschaft +translation_of: Web/CSS/mix-blend-mode +--- +<p>{{CSSRef()}}</p> + +<h2 id="Summary" name="Summary">Übersicht</h2> + +<p>Die <code>mix-blend-mode</code> CSS Eigenschaft beschreibt, wie sich der Inhalt des Elements mit dem Inhalt des Elements unter ihm und dem Element-Hintergrund vermischen soll.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css">/* Keyword values */ +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; + +/* Global values */ +mix-blend-mode: initial; +mix-blend-mode: inherit; +mix-blend-mode: unset; +</pre> + +<h3 id="Values" name="Values">Werte</h3> + +<dl> + <dt><code><blend-mode></code></dt> + <dd>Ein {{cssxref("<blend-mode>")}} der den zu verwendenden Mischmodus festlegt. Mehrere Werte können per Komma getrennt angegeben werden.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<pre class="brush: html"><svg> + <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"/> +</svg></pre> + +<pre class="brush:css">circle { mix-blend-mode: screen; }</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", "100%", "180")}}</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Unterstützung</h2> + +{{Compat("css.properties.mix-blend-mode")}} + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("background-blend-mode")}}</li> +</ul> |