- 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-composite Property
CSS mask-composite property defines how a mask image is composited with the element's background.
Possible Values
The property mask-composite can have one or more of the following keyword values, separated by comma.
add − Position the source above the destination.
subtract − Position the source so that it is outside of the destination.
intersect − Replace the destination with the parts of the source that overlap it.
exclude − Non-overlapping areas of source and destination do not overlap.
Here, source refers to the current mask layer, while all layers behind it are known as the destination.
Applies To
All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements.
Syntax
mask-composite: add | subtract | intersect | exclude;
CSS mask-composite - add Value
The following example demonstrates how the masks should be combined using the "add" composite mode. The final mask contains areas covered by both the mask images −
<html> <head> <style> .box { margin: 20px auto; display: block; width: 200px; height: 200px; background-color: red; -webkit-mask-image: url(images/book.png), url(images/heart.png); mask-image: url(images/book.png), url(images/heart.png); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-composite: add; mask-composite: add; } </style> </head> <body> <div class="box"></div> </body> </html>
CSS mask-composite - subtract Value
The following example demonstrates how the mask-composite property with the subtract value. The overlapping areas of the two mask images should be subtracted from the background −
<html> <head> <style> .box { margin: 20px auto; display: block; width: 200px; height: 200px; background-color: red; -webkit-mask-image: url(images/book.png), url(images/heart.png); mask-image: url(images/book.png), url(images/heart.png); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-composite: subtract; mask-composite: subtract; } </style> </head> <body> <div class="box"></div> </body> </html>
CSS mask-composite - intersect Value
The following example demonstrates how the mask-composite: intersect property defines the overlapping areas (intersection) of the two mask images −
<html> <head> <style> .box { margin: 20px auto; display: block; width: 200px; height: 200px; background-color: red; -webkit-mask-image: url(images/book.png), url(images/heart.png); mask-image: url(images/book.png), url(images/heart.png); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-size: 100% 100%; mask-size:100% 100%; -webkit-mask-composite: intersect; mask-composite: intersect; } </style> </head> <body> <div class="box"></div> </body> </html>
CSS mask-composite - exclude Value
The following example demonstrates that the mask-composite: exclude property defines the shape excluded from the two mask images −
<html> <head> <style> .box { margin: 20px auto; display: block; width: 200px; height: 200px; background-color: red; -webkit-mask-image: url(images/book.png), url(images/heart.png); mask-image: url(images/book.png), url(images/heart.png); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-size: 100% 100%; mask-size:100% 100%; -webkit-mask-composite: exclude; mask-composite: exclude; } </style> </head> <body> <div class="box"></div> </body> </html>
To Continue Learning Please Login
Login with Google