From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/mix-blend-mode/index.html | 164 ++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/pt-br/web/css/mix-blend-mode/index.html (limited to 'files/pt-br/web/css/mix-blend-mode/index.html') diff --git a/files/pt-br/web/css/mix-blend-mode/index.html b/files/pt-br/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..c8677e6545 --- /dev/null +++ b/files/pt-br/web/css/mix-blend-mode/index.html @@ -0,0 +1,164 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +tags: + - CSS + - Propriedade CSS +translation_of: Web/CSS/mix-blend-mode +--- +

{{CSSRef}}

+ +

Resumo

+ +

A propriedade mix-blend-mode descreve como um elemento de conteúdo deve ser mesclado com os elementos abaixo dele no background.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
/* Valores para esta propriedade */
+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;
+
+/* Valores globais */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

Valores

+ +
+
<blend-mode>
+
É uma {{cssxref("<blend-mode>")}} que descreve qual mesclagem deve ser aplicada. Podem ser descritos vários valores, separados por vírgula.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplos

+ +
<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>
+ +
circle { mix-blend-mode: screen; }
+ +

Resultado

+ +

{{EmbedLiveSample("Examples", "100%", "180")}}

+ +

Especificações

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

Compatibilidade de navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support +

{{CompatChrome(41.0)}}

+
{{CompatGeckoDesktop('32.0')}}{{CompatUnknown()}}{{CompatVersionUnknown()}}8.0
SVG{{CompatNo}}{{CompatGeckoDesktop('32.0')}}{{CompatUnknown()}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support +

{{CompatChrome(41.0)}}

+
{{CompatGeckoMobile('32.0')}}{{CompatUnknown()}}{{CompatUnknown()}}8.0
SVG{{CompatNo}}{{CompatGeckoMobile('32.0')}}{{CompatUnknown()}}{{CompatNo}}{{CompatNo}}
+
+ +

 

+ +

Veja também

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