{"id":82165,"date":"2022-08-12T21:37:47","date_gmt":"2022-08-12T19:37:47","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/como-utilizar-el-enmascaramiento-css\/"},"modified":"2020-09-16T14:52:35","modified_gmt":"2020-09-16T17:52:35","slug":"como-utilizar-el-enmascaramiento-css","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/como-utilizar-el-enmascaramiento-css\/","title":{"rendered":"Verwendung der CSS-Maskierung"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-utilizar-el-enmascaramiento-css\/#Compatibilidad-del-navegador\" >Browser-Kompatibilit\u00e4t<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-utilizar-el-enmascaramiento-css\/#Enmascaramiento-con-una-imagen\" >Maskieren mit einem Bild<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-utilizar-el-enmascaramiento-css\/#Enmascaramiento-con-SVG\" >Maskierung mit SVG<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-utilizar-el-enmascaramiento-css\/#Enmascaramiento-con-un-degradado\" >Maskierung mit einem Farbverlauf<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-utilizar-el-enmascaramiento-css\/#Usando-multiples-mascaras\" >Verwenden mehrerer Skins<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p>\n          <time>14. September 2020<\/time><\/p>\n<\/header>\n<p>Wenn Sie einen Artikel mit dem trimmen <code>Clip-Pfad<\/code> Eigenschaft wird der abgeschnittene Bereich unsichtbar. Wenn Sie stattdessen einen Teil des Bildes undurchsichtig machen oder einen anderen Effekt darauf anwenden m\u00f6chten, sollten Sie die Maskierung verwenden. Dieser Beitrag erkl\u00e4rt, wie man das benutzt <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/mask-image\"><code>Maskenbild<\/code><\/a>  In CSS k\u00f6nnen Sie ein Bild angeben, das als Maskenebene verwendet werden soll. Dies gibt Ihnen drei M\u00f6glichkeiten. Sie k\u00f6nnen eine Bilddatei als Skin, SVG oder Verlauf verwenden.<\/p>\n<h2 id=\"browser-compatibility\"><span class=\"ez-toc-section\" id=\"Compatibilidad-del-navegador\"><\/span>Browser-Kompatibilit\u00e4t <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die meisten Browser unterst\u00fctzen die Standard-CSS-Maskierungseigenschaft nur teilweise. Sie m\u00fcssen die verwenden <code>-webkit-<\/code> Pr\u00e4fix zus\u00e4tzlich zur Standardeigenschaft f\u00fcr beste Browserkompatibilit\u00e4t. Sehen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=css-masks\">Kann ich CSS-Masken verwenden?<\/a> Vollst\u00e4ndige Informationen zur Browserkompatibilit\u00e4t.<\/p>\n<p>W\u00e4hrend die Browserunterst\u00fctzung f\u00fcr die Standardeigenschaft gut ist, sollten Sie bei der Verwendung der Maskierung, um Text \u00fcber einem Bild sichtbar zu machen, beachten, was passieren wird, wenn die Maskierung nicht verf\u00fcgbar ist. Es kann sinnvoll sein, Funktionsabfragen zu verwenden, um die Kompatibilit\u00e4t mit festzustellen <code>Maskenbild<\/code> oder <code>-webkit-maskenbild<\/code><br \/>\nund stellen Sie eine lesbare Sicherung bereit, bevor Sie Ihre maskierte Version hinzuf\u00fcgen.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token atrule\"><span class=\"token rule\">@supports<\/span><span class=\"token punctuation\">(<\/span><span class=\"token property\">-webkit-maskenbild<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">URL<\/span><span class=\"token punctuation\">(<\/span>#mask<span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">oder<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">Maskenbild<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">URL<\/span><span class=\"token punctuation\">(<\/span>#mask<span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"masking-with-an-image\"><span class=\"ez-toc-section\" id=\"Enmascaramiento-con-una-imagen\"><\/span>Maskieren mit einem Bild <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>das <code>Maskenbild<\/code> Die Eigenschaft funktioniert \u00e4hnlich wie die <code>Hintergrundbild<\/code> Eigentum. Benutze einen <code>url ()<\/code> Wert, der in einem Bild \u00fcbergeben werden soll. Ihr Maskenbild sollte einen transparenten oder halbtransparenten Bereich haben.<\/p>\n<p>Ein vollst\u00e4ndig transparenter Bereich macht den Teil des Bildes unter diesem Bereich unsichtbar. Wenn Sie jedoch einen halbtransparenten Bereich verwenden, kann ein Teil des Originalbilds durchscheinen. Sie k\u00f6nnen den Unterschied in der Panne unten sehen. Das erste Bild ist das Originalbild von Luftballons ohne Maske. Das zweite Bild hat eine Maske mit einem wei\u00dfen Stern auf einem vollst\u00e4ndig transparenten Hintergrund. Das dritte Bild hat einen wei\u00dfen Stern auf einem Hintergrund mit einer Verlaufstransparenz.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/mask-image?path=index.html&amp;previewSize=100\" title=\"Maskenbild auf Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>In diesem Beispiel verwende ich auch die <code>Maskengr\u00f6\u00dfe<\/code> Eigentum mit einem Wert von <code>Startseite<\/code>. Diese Eigenschaft funktioniert genauso wie <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-size\"><code>Hintergrundgr\u00f6\u00dfe<\/code><\/a>. Sie k\u00f6nnen die Schl\u00fcsselw\u00f6rter verwenden <code>Startseite<\/code> y <code>enthalten<\/code> oder Sie k\u00f6nnen die Gr\u00f6\u00dfe des Hintergrunds mit einer beliebigen g\u00fcltigen L\u00e4ngeneinheit oder einem Prozentsatz anpassen.<\/p>\n<p>Sie k\u00f6nnen Ihre Maske auch so wiederholen, wie Sie ein Hintergrundbild wiederholen k\u00f6nnten, um ein kleines Bild als Wiederholungsmuster zu verwenden.<\/p>\n<h2 id=\"masking-with-svg\"><span class=\"ez-toc-section\" id=\"Enmascaramiento-con-SVG\"><\/span>Maskierung mit SVG <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Anstatt eine Bilddatei als Skin zu verwenden, k\u00f6nnen Sie SVG verwenden. Es gibt verschiedene M\u00f6glichkeiten, dies zu erreichen. Das erste ist, eine zu haben <code><\/code> Element innerhalb der SVG und verweisen Sie auf die ID dieses Elements in der <code>Maskenbild<\/code> Eigentum.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">Breite<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">H\u00f6he<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0 0 400 300<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>defs<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Maske<\/span> <span class=\"token attr-name\">gehen<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Maske<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>rect<\/span> <span class=\"token attr-name\">fill<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>#000000<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">x<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">y<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">Breite<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>400<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">H\u00f6he<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>300<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>rect<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Kreis<\/span> <span class=\"token attr-name\">fill<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>#FFFFFF<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cx<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>150<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cy<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>150<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">r<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>100<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Kreis<\/span> <span class=\"token attr-name\">fill<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>#FFFFFF<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cx<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cy<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">r<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>150<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>Maske<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>defs<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>svg<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><p><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">Klasse<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>balloons.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Balloons<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.container img<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">H\u00f6he<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Breite<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">object-fit<\/span><span class=\"token punctuation\">:<\/span> Startseite<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">-webkit-maskenbild<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">URL<\/span><span class=\"token punctuation\">(<\/span>#mask<span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Maskenbild<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">URL<\/span><span class=\"token punctuation\">(<\/span>#mask<span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<figure class=\"w-figure\">\n  <img alt='svg-mask-3059015' class=\"w-screenshot\" style=\"max-inline-size: 480px\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/svg-mask-3059015.jpg'><br \/>\n<\/figure>\n<p>Der Vorteil dieses Ansatzes besteht darin, dass die Maske auf jedes HTML-Element angewendet werden kann, nicht nur auf ein Bild. Leider ist Firefox der einzige Browser, der diesen Ansatz unterst\u00fctzt.<\/p>\n<p>Es ist jedoch nicht alles verloren, da wir f\u00fcr das h\u00e4ufigste Szenario zum Maskieren eines Bildes das Bild in die SVG aufnehmen k\u00f6nnen.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/mask-image-svg-image?path=README.md&amp;previewSize=100\" title=\"mask-image-svg-image auf Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h2 id=\"masking-with-a-gradient\"><span class=\"ez-toc-section\" id=\"Enmascaramiento-con-un-degradado\"><\/span>Maskierung mit einem Farbverlauf <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Verwendung eines CSS-Verlaufs als Maske ist eine elegante Methode, um einen maskierten Bereich zu erzielen, ohne sich die M\u00fche machen zu m\u00fcssen, ein Bild oder eine SVG-Datei zu erstellen.<\/p>\n<p>Ein einfacher linearer Farbverlauf, der als Maske verwendet wird, kann beispielsweise sicherstellen, dass der untere Rand eines Bildes unter einem Titel nicht zu dunkel ist.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/mask-linear-gradient?path=README.md&amp;previewSize=100\" title=\"Masken-Linear-Gradient auf Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>Sie k\u00f6nnen jeden der unterst\u00fctzten Verlaufstypen verwenden und so kreativ sein, wie Sie m\u00f6chten. Im folgenden Beispiel wird ein radialer Farbverlauf verwendet, um eine kreisf\u00f6rmige Maske zu erstellen, die hinter dem Titel beleuchtet wird.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/mask-radial-gradient?path=README.md&amp;previewSize=100\" title=\"Masken-Radial-Gradient auf Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h2 id=\"using-multiple-masks\"><span class=\"ez-toc-section\" id=\"Usando-multiples-mascaras\"><\/span>Verwenden mehrerer Skins <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wie bei Hintergrundbildern k\u00f6nnen Sie mehrere Maskenschriftarten angeben und diese kombinieren, um den gew\u00fcnschten Effekt zu erzielen. Dies ist besonders n\u00fctzlich, wenn Sie ein mit CSS-Verl\u00e4ufen generiertes Muster als Maske verwenden m\u00f6chten. Diese verwenden normalerweise mehrere Hintergrundbilder und k\u00f6nnen daher leicht in eine Maske \u00fcbersetzt werden.<\/p>\n<p>Als Beispiel fand ich ein sch\u00f6nes Schachbrettmuster in <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cssgradient.io\/blog\/gradient-patterns\/\">Dieser Beitrag<\/a>. Der Code mit Hintergrundbildern sieht folgenderma\u00dfen aus:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token property\">Hintergrundbild<\/span><span class=\"token punctuation\">:<\/span><br><span class=\"token function\">linearer Gradient<\/span><span class=\"token punctuation\">(<\/span>45deg<span class=\"token punctuation\">,<\/span> #ccc 25%<span class=\"token punctuation\">,<\/span> transparent 25%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">linearer Gradient<\/span><span class=\"token punctuation\">(<\/span>-45deg<span class=\"token punctuation\">,<\/span> #ccc 25%<span class=\"token punctuation\">,<\/span> transparent 25%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">linearer Gradient<\/span><span class=\"token punctuation\">(<\/span>45deg<span class=\"token punctuation\">,<\/span> transparent 75%<span class=\"token punctuation\">,<\/span> #ccc 75%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">linearer Gradient<\/span><span class=\"token punctuation\">(<\/span>-45deg<span class=\"token punctuation\">,<\/span> transparent 75%<span class=\"token punctuation\">,<\/span> #ccc 75%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Hintergrundgr\u00f6\u00dfe<\/span><span class=\"token punctuation\">:<\/span>20px 20px<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">background-position<\/span><span class=\"token punctuation\">:<\/span> 0 0<span class=\"token punctuation\">,<\/span> 0 10px<span class=\"token punctuation\">,<\/span> 10px -10px<span class=\"token punctuation\">,<\/span> -10px 0px<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Um dieses oder ein anderes Muster f\u00fcr Hintergrundbilder in eine Maske umzuwandeln, m\u00fcssen Sie das ersetzen <code>Hintergrund- *<\/code> Eigenschaften mit den relevanten <code>Maske<\/code> Eigenschaften, einschlie\u00dflich <code>-webkit<\/code> die Standard.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token property\">-webkit-maskenbild<\/span><span class=\"token punctuation\">:<\/span><br><span class=\"token function\">linearer Gradient<\/span><span class=\"token punctuation\">(<\/span>45deg<span class=\"token punctuation\">,<\/span> #000000 25%<span class=\"token punctuation\">,<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>0<span class=\"token punctuation\">,<\/span>0<span class=\"token punctuation\">,<\/span>0<span class=\"token punctuation\">,<\/span>0.2<span class=\"token punctuation\">)<\/span> 25%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">linearer Gradient<\/span><span class=\"token punctuation\">(<\/span>-45deg<span class=\"token punctuation\">,<\/span> #000000 25%<span class=\"token punctuation\">,<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>0<span class=\"token punctuation\">,<\/span>0<span class=\"token punctuation\">,<\/span>0<span class=\"token punctuation\">,<\/span>0.2<span class=\"token punctuation\">)<\/span> 25%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">linearer Gradient<\/span><span class=\"token punctuation\">(<\/span>45deg<span class=\"token punctuation\">,<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>0<span class=\"token punctuation\">,<\/span>0<span class=\"token punctuation\">,<\/span>0<span class=\"token punctuation\">,<\/span>0.2<span class=\"token punctuation\">)<\/span> 75%<span class=\"token punctuation\">,<\/span> #000000 75%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token function\">linearer Gradient<\/span><span class=\"token punctuation\">(<\/span>-45deg<span class=\"token punctuation\">,<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>0<span class=\"token punctuation\">,<\/span>0<span class=\"token punctuation\">,<\/span>0<span class=\"token punctuation\">,<\/span>0.2<span class=\"token punctuation\">)<\/span> 75%<span class=\"token punctuation\">,<\/span> #000000 75%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">-webkit-mask-size<\/span><span class=\"token punctuation\">:<\/span>20px 20px<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">-webkit-mask-position<\/span><span class=\"token punctuation\">:<\/span> 0 0<span class=\"token punctuation\">,<\/span> 0 10px<span class=\"token punctuation\">,<\/span> 10px -10px<span class=\"token punctuation\">,<\/span> -10px 0px<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Es gibt einige wirklich sch\u00f6ne Effekte, die Farbverlaufsmuster auf Bilder anwenden. Versuchen Sie, den Glitch neu zu mischen, und probieren Sie einige andere Variationen aus.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/mask-checkers?path=README.md&amp;previewSize=100\" title=\"Maskenpr\u00fcfer auf Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>Neben dem Ausschneiden bieten CSS-Masken eine M\u00f6glichkeit, Bilder und andere HTML-Elemente ohne Verwendung einer Grafikanwendung interessanter zu gestalten.<\/p>\n<p><em><span>Foto von <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@juliorionaldo\">Julio Rionaldo<\/a> auf Unsplash<\/span>.<\/em><\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>14.09.2020 Wenn Sie ein Element mit der Clip-Pfad-Eigenschaft zuschneiden, wird der abgeschnittene Bereich unsichtbar. Wenn Sie stattdessen einen Teil des Bildes machen m\u00f6chten ...<\/p>","protected":false},"author":1,"featured_media":82166,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-82165","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo utilizar el enmascaramiento CSS - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"14 de septiembre de 2020 Cuando recorta un elemento con el clip-path propiedad, el \u00e1rea recortada se vuelve invisible. Si, en cambio, desea hacer que\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-css-masking\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo utilizar el enmascaramiento CSS\" \/>\n<meta property=\"og:description\" content=\"14 de septiembre de 2020 Cuando recorta un elemento con el clip-path propiedad, el \u00e1rea recortada se vuelve invisible. Si, en cambio, desea hacer que\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-css-masking\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-12T19:37:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8540548.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"C\u00f3mo utilizar el enmascaramiento CSS\",\"datePublished\":\"2022-08-12T19:37:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/\"},\"wordCount\":788,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8540548.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/\",\"name\":\"C\u00f3mo utilizar el enmascaramiento CSS - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8540548.jpg\",\"datePublished\":\"2022-08-12T19:37:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"14 de septiembre de 2020 Cuando recorta un elemento con el clip-path propiedad, el \u00e1rea recortada se vuelve invisible. Si, en cambio, desea hacer que\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/how-to-use-css-masking\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8540548.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8540548.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-8540548-2135535-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo utilizar el enmascaramiento CSS - R Marketing Digital","description":"14. September 2020 Wenn Sie ein Element mit der Eigenschaft clip-path ausschneiden, wird der abgeschnittene Bereich unsichtbar. Wenn Sie stattdessen machen wollen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-css-masking\/","og_locale":"de_DE","og_type":"article","og_title":"C\u00f3mo utilizar el enmascaramiento CSS","og_description":"14 de septiembre de 2020 Cuando recorta un elemento con el clip-path propiedad, el \u00e1rea recortada se vuelve invisible. Si, en cambio, desea hacer que","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-css-masking\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-12T19:37:47+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8540548.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"C\u00f3mo utilizar el enmascaramiento CSS","datePublished":"2022-08-12T19:37:47+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/"},"wordCount":788,"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8540548.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/","url":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/","name":"C\u00f3mo utilizar el enmascaramiento CSS - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8540548.jpg","datePublished":"2022-08-12T19:37:47+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"14. September 2020 Wenn Sie ein Element mit der Eigenschaft clip-path ausschneiden, wird der abgeschnittene Bereich unsichtbar. Wenn Sie stattdessen machen wollen","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-css-masking\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8540548.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8540548.jpg","width":1200,"height":360,"caption":"hero-8540548-2135535-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/82165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=82165"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/82165\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/82166"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=82165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=82165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=82165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}