mozilla

Revision 328637 of -webkit-mask

  • Revision slug: CSS/-webkit-mask
  • Revision title: -webkit-mask
  • Revision id: 328637
  • Created:
  • Creator: Supuhstar
  • Is current revision? No
  • Comment derp... checked the wrong box ^^;
Tags: 

Revision Content

{{ CSSRef() }}

{{ Non-standard_header() }}

Summary

The -webkit-mask property is a shorthand property for setting individual mask property values in a single place in the style sheet. -webkit-mask can be used to set the values for one or more of: {{ Cssxref("-webkit-mask-image") }},  {{ Cssxref("-webkit-mask-repeat") }},  {{ Cssxref("-webkit-mask-attachment") }}, {{ Cssxref("-webkit-mask-position") }}, {{ Cssxref("-webkit-mask-origin") }}, and  {{ Cssxref("-webkit-mask-clip") }}.

  • {{ Xref_cssinitial() }}: see individual properties for details
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: see individual properties

Syntax

-webkit-mask: <mask-image> [<mask-repeat> || <mask-attachment> || <mask-position> || <mask-origin> || <mask-clip>]*

Values

mask-image
Required. See {{ Cssxref("-webkit-mask-image") }}.
mask-repeat
Optional. See {{ Cssxref("-webkit-mask-repeat") }}.
mask-attachment
Optional. See {{ Cssxref("-webkit-mask-attachment") }}.
mask-position
Optional. See {{ Cssxref("-webkit-mask-position") }}.
mask-origin
Optional. See {{ Cssxref("-webkit-mask-origin") }}.
mask-clip
Optional. See {{ Cssxref("-webkit-mask-clip") }}.

Examples

.example {
    -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
} 

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} 3.2

See also

{{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-clip") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ Non-standard_header() }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p>The <code>-webkit-mask</code> property is a shorthand property for setting individual mask property values in a single place in the style sheet. <code>-webkit-mask</code> can be used to set the values for one or more of: {{ Cssxref("-webkit-mask-image") }},&nbsp; {{ Cssxref("-webkit-mask-repeat") }},&nbsp; {{ Cssxref("-webkit-mask-attachment") }}, {{ Cssxref("-webkit-mask-position") }}, {{ Cssxref("-webkit-mask-origin") }}, and&nbsp; {{ Cssxref("-webkit-mask-clip") }}.</p>
<ul>
  <li>{{ Xref_cssinitial() }}: see individual properties for details</li>
  <li>Applies to: all elements</li>
  <li>{{ Xref_cssinherited() }}: no</li>
  <li>Percentages: N/A</li>
  <li>Media: {{ Xref_cssvisual() }}</li>
  <li>{{ Xref_csscomputed() }}: see individual properties</li>
</ul>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre class="eval">
-webkit-mask: &lt;mask-image&gt; [&lt;mask-repeat&gt; || &lt;mask-attachment&gt; || &lt;mask-position&gt; || &lt;mask-origin&gt; || &lt;mask-clip&gt;]*
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    mask-image</dt>
  <dd>
    <em>Required</em>. See {{ Cssxref("-webkit-mask-image") }}.</dd>
  <dt>
    mask-repeat</dt>
  <dd>
    <em>Optional</em>. See {{ Cssxref("-webkit-mask-repeat") }}.</dd>
  <dt>
    mask-attachment</dt>
  <dd>
    <em>Optional</em>. See {{ Cssxref("-webkit-mask-attachment") }}.</dd>
  <dt>
    mask-position</dt>
  <dd>
    <em>Optional</em>. See {{ Cssxref("-webkit-mask-position") }}.</dd>
  <dt>
    mask-origin</dt>
  <dd>
    <em>Optional</em>. See {{ Cssxref("-webkit-mask-origin") }}.</dd>
  <dt>
    mask-clip</dt>
  <dd>
    <em>Optional</em>. See {{ Cssxref("-webkit-mask-clip") }}.</dd>
</dl>
<h3 id="Examples" name="Examples">Examples</h3>
<pre class="brush: css">
.example {
    -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
} 
</pre>
<h3 id="Browser_compatibility">Browser compatibility</h3>
<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 (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>4.0</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&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.1</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>3.2</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="See_also" name="See_also">See also</h3>
<p>{{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-clip") }},&nbsp;{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p>
Revert to this revision