mozilla

Revision 532265 of background-blend-mode

  • Revision slug: Web/CSS/background-blend-mode
  • Revision title: background-blend-mode
  • Revision id: 532265
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment Using all the macros!

Revision Content

{{CSSRef()}}

Summary

The background-blend-mode CSS property describes how a background should blend with the element's background that is below it and the element's background color. Background elements should be blended while content appearance should be kept unchanged.

Blending modes should be defined in the same order as the background-image CSS property. If blending modes and background images list lengths are not equal, it will be repeated and/or truncated until lengths match.

{{cssbox("background-blend-mode")}}

Syntax

Formal syntax:  {{csssyntax("background-blend-mode")}}
property: normal               /* One value */
property: darken, luminosity   /* Two values */

Values

<blend-mode>
Is a {{Xref_cssblendmode()}} denoting the blending mode to be applied. There can be several values, separated by commas.

Examples


Specifications

Specification Status Comment
{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }} {{ Spec2('Compositing') }} Initial specification.

Browser compatibility

{{CompatibilityTable()}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatUnknown()}} {{CompatGeckoDesktop('28.0')}} {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}}

See also

Revision Source

<p>{{CSSRef()}}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>background-blend-mode</code> CSS property describes how a background should blend with the element's background that is below it and the element's background color. Background elements should be blended while content appearance should be kept unchanged.</p>
<p>Blending modes should be defined in the same order as the <code>background-image</code> CSS property. If blending modes and background images list lengths are not equal, it will be repeated and/or truncated until lengths match.</p>
<p>{{cssbox("background-blend-mode")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<code>Formal syntax:  {{csssyntax("background-blend-mode")}}</code></pre>
<pre>
property: normal               /* One value */
property: darken, luminosity   /* Two values */
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
 <dt>
  <code>&lt;blend-mode&gt;</code></dt>
 <dd>
  Is a {{Xref_cssblendmode()}} denoting the blending mode to be applied. There can be several values, separated by commas.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush:css">
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td>
   <td>{{ Spec2('Compositing') }}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatGeckoDesktop('28.0')}}</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
Revert to this revision