- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Masking - mask-origin Property
CSS mask-origin property defines the origin of the mask image.
This property provides the mask positioning area for elements displayed as a single box, which means, it specifies the origin position of an image determined by the mask-image CSS property.
For elements displayed as multiple boxes (e.g., inline boxes on multiple lines or boxes spanning several pages), the mask-origin property specifies which boxes are affected by box-decoration-break to determine the mask positioning area.
Possible Values
content-box − Sets the origin of the mask image relative to the outer edge of the content box.
padding-box − Sets the origin of the mask image relative to the outer edge of the padding box.
border-box − Sets the origin of the mask image relative to the outer edge of the border box.
fill-box − Sets the origin of the mask image relative to the object bounding box.
stroke-box − Sets the origin of the mask image relative to the stroke bounding box.
view-box − The nearest SVG viewport is considered as a reference box. SVG elements with a viewBox attribute have their content placed at the origin of the coordinate system defined by the viewBox, and the size or dimensions of the reference box is set to the width and height specified in the viewBox attribute.
Applies to
All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements.
Syntax
mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;
CSS mask-origin - content-box
The following example demonstrates that the -webkit-mask-origin: content-box property sets the origin of the mask image with the content box of the element −
<html> <head> <style> .box { max-width: 280px; border: 3px solid blue; } .mask-container { background-color: gold; display: block; padding: 20px; width: 200px; height: 200px; border: 20px solid red; -webkit-mask-image: url(images/heart.png); -webkit-mask-position: top left; -webkit-mask-repeat: repeat; -webkit-mask-size: 70px 70px; -webkit-mask-origin: content-box; } </style> </head> <body> <div class="box"> <div class="mask-container"> <img src="images/pink-flower.jpg" alt="pink flower" width="100%"> </div> </div> </body> </html>
CSS mask-origin - padding-box
The following example demonstrates that the -webkit-mask-origin: padding-box property sets the origin of the mask image with the padding box of the element −
<html> <head> <style> .box { max-width: 280px; border: 3px solid blue; } .mask-container { background-color: gold; display: block; padding: 20px; width: 200px; height: 200px; border: 20px solid red; -webkit-mask-image: url(images/heart.png); -webkit-mask-position: top left; -webkit-mask-repeat: repeat; -webkit-mask-size: 70px 70px; -webkit-mask-origin: padding-box; } </style> </head> <body> <div class="box"> <div class="mask-container"> <img src="images/pink-flower.jpg" alt="pink flower" width="100%"> </div> </div> </body> </html>
CSS mask-origin - border-box
The following example demonstrates that the -webkit-mask-origin: border-box property sets the origin of the mask image with the border box of the element −
<html> <head> <style> .box { max-width: 280px; border: 3px solid blue; } .mask-container { background-color: gold; display: block; padding: 20px; width: 200px; height: 200px; border: 20px solid red; -webkit-mask-image: url(images/heart.png); -webkit-mask-position: top left; -webkit-mask-repeat: repeat; -webkit-mask-size: 70px 70px; -webkit-mask-origin: border-box; } </style> </head> <body> <div class="box"> <div class="mask-container"> <img src="images/pink-flower.jpg" alt="pink flower" width="100%"> </div> </div> </body> </html>
CSS mask-origin - fill-box
The following example demonstrates that the -webkit-mask-origin: fill-box property sets the origin of the mask image relative to the entire box, including any padding −
<html> <head> <style> .box { max-width: 240px; border: 3px solid blue; } .mask-container { background-color: gold; display: block; padding: 20px; width: 200px; height: 200px; -webkit-mask-image: url(images/heart.png); -webkit-mask-position: top left; -webkit-mask-repeat: repeat; -webkit-mask-size: 70px 70px; -webkit-mask-origin: fill-box; } </style> </head> <body> <div class="box"> <div class="mask-container"> <img src="images/pink-flower.jpg" alt="pink flower" width="100%"> </div> </div> </body> </html>
CSS mask-origin - stroke-box
The following example demonstrates that the -webkit-mask-origin: stroke-box property sets the origin of the mask image relative to the stroke bounding box, including any padding and border −
<html> <head> <style> .box { max-width: 280px; border: 3px solid blue; } .mask-container { background-color: gold; display: block; padding: 20px; width: 200px; height: 200px; border: 20px solid red; -webkit-mask-image: url(images/heart.png); -webkit-mask-position: top left; -webkit-mask-repeat: repeat; -webkit-mask-size: 70px 70px; -webkit-mask-origin: stroke-box; } </style> </head> <body> <div class="box"> <div class="mask-container"> <img src="images/pink-flower.jpg" alt="pink flower" width="100%"> </div> </div> </body> </html>
To Continue Learning Please Login
Login with Google