-webkit-mask-box-image

  • Revision slug: CSS/-webkit-mask-box-image
  • Revision title: -webkit-mask-box-image
  • Revision id: 49064
  • Created:
  • Creator: berkerpeksag
  • Is current revision? No
  • Comment 5 words added, 5 words removed

Revision Content

{{ CSSRef() }}

Summary

-webkit-mask-box-image sets the mask image for an element's border box.

  • {{ Xref_cssinitial() }}: none
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]

Where:

<mask-box-image>
{{ Xref_cssuri() }} | <gradient> | none
<top> <right> <bottom> <left>
<length> | <percentage>
<x-repeat> <y-repeat>
repeat | stretch | round

Values

<uri>
The location of the image resource to be used as a mask image.
<gradient>
A -webkit-gradient function to be used as a mask image.
none
Used to specify that a border box is to have no mask image.
<length>
The size of the mask image's offset. See {{ Xref_csslength() }} for possible units.
<percentage>
The mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height).
repeat
The mask image is repeated as many times as is necessary to span the border box. May include a partial image if the mask image does not divide evenly into the border box.
stretch
 The mask image is stretched to contain the border box exactly.
round
 The mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box.

Examples

.exampleone {
	-webkit-mask-box-image: url("mask.png");
}

.exampletwo {
	-webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}

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 {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

See also

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ 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>
<h3 name="Summary">Summary</h3>
<p><code>-webkit-mask-box-image</code> sets the mask image for an element's border box.</p>
<ul> <li>{{ Xref_cssinitial() }}: none</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">-webkit-mask-box-image: &lt;mask-box-image&gt; [&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt; &lt;x-repeat&gt; &lt;y-repeat&gt;]
</pre>
<p>Where:</p>
<dl> <dt>&lt;mask-box-image&gt;</dt> <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit; ">{{ Xref_cssuri() }} | &lt;gradient&gt; | none</code></dd> <dt>&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;</dt> <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit; ">&lt;length&gt; | &lt;percentage&gt;</code></dd> <dt>&lt;x-repeat&gt; &lt;y-repeat&gt;</dt> <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit; ">repeat | stretch | round</code></dd>
</dl>
<h3 name="Values">Values</h3>
<dl> <dt>&lt;uri&gt;</dt> <dd>The location of the image resource to be used as a mask image.</dd> <dt style="font-style: normal; font-weight: bold; ">&lt;gradient&gt;</dt> <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: rgb(153, 153, 153); margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px; ">A <span style="font-family: Courier New;">-webkit-gradient</span> function to be used as a mask image.</dd> <dt>none</dt> <dd>Used to specify that a border box is to have no mask image.</dd>
</dl>
<dl> <dt>&lt;length&gt;</dt> <dd>The size of the mask image's offset. See {{ Xref_csslength() }} for possible units.</dd> <dt>&lt;percentage&gt;</dt> <dd>The mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height).</dd> <dt style="font-style: normal; font-weight: bold; ">repeat</dt> <dd>The mask image is repeated as many times as is necessary to span the border box. May include a partial image if the mask image does not divide evenly into the border box.</dd> <dt>stretch</dt> <dd> The mask image is stretched to contain the border box exactly.</dd> <dt>round</dt> <dd> The mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box.</dd>
</dl>
<div> <h3 name="Examples">Examples</h3> <pre class="brush: css">.exampleone {
	-webkit-mask-box-image: url("mask.png");
}

.exampletwo {
	-webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}
</pre> <h3 name="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 Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
</div>
<h3>See also</h3>
<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-clip") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p>
Revert to this revision