mozilla

Revision 531913 of background-blend-mode

  • Revision slug: Web/CSS/background-blend-mode
  • Revision title: background-blend-mode
  • Revision id: 531913
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef()}}

Summary

The background-blend-mode CSS property describes how an 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.

  • {{Xref_cssinitial()}} {{Cssxref("normal")}}
  • Applies to all elements
  • {{Xref_cssinherited()}} no
  • Media {{Xref_cssvisual()}}
  • {{Xref_csscomputed()}} as specified
  • {{ Xref_cssanimatable() }} no

Syntax

Formal syntax:  <blend-mode>#
property: normal               /* One value */
property: darken, luminosity   /* Two values */

Values

<blend-mode></blend-mode>
Is a <blend-mode></blend-mode> denoting the blending mode that should be applied. There can be several values, separated by commas.

Examples

{{CSSLiveSample('background.html')}} Add this only if there is such an exampe. No dead link here

elementName {
  property: value;
  thisis: "example";
  dream: 10000000mm;
  love: "danger";
}

Specifications

Exclusively use this standard table. Place older spec on the bottom. Use the templates SpecName() for the name and Spec2() for the status. That way, when the spec progress on the standard track, or move, the table content will be automatically adapted.

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

Browser compatibility

(See Compatibility tables for more information)

{{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 an 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>
<ul class="cssprop">
 <li><dfn>{{Xref_cssinitial()}}</dfn> {{Cssxref("normal")}}</li>
 <li><dfn>Applies to</dfn> all elements</li>
 <li><dfn>{{Xref_cssinherited()}}</dfn> no</li>
 <li><dfn>Media</dfn> {{Xref_cssvisual()}}</li>
 <li><dfn>{{Xref_csscomputed()}}</dfn> as specified</li>
 <li><dfn>{{ Xref_cssanimatable() }}</dfn> no</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<code>Formal syntax:  &lt;blend-mode&gt;#</code></pre>
<pre>
property: normal               /* One value */
property: darken, luminosity   /* Two values */
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
 <dt>
  <code><blend-mode></blend-mode></code></dt>
 <dd>
  Is a <code><blend-mode></blend-mode></code> denoting the blending mode that should be applied. There can be several values, separated by commas.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<p>{{CSSLiveSample('background.html')}} <em>Add this only if there is such an exampe. No dead link here</em></p>
<pre class="brush:css">
elementName {
  property: value;
  thisis: "example";
  dream: 10000000mm;
  love: "danger";
}</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<p><em>Exclusively use this standard table. Place older spec on the bottom. Use the templates SpecName() for the name and Spec2() for the status. That way, when the spec progress on the standard track, or move, the table content will be automatically adapted.</em></p>
<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><em>(See <a href="/Project:en/Compatibility_tables" title="Project:en/Compatibility_tables">Compatibility tables</a> for more information)</em></p>
<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