CSS | isolation Property
The isolation property in CSS is used to define whether an element must create a new stacking content. It prevents an element from acquiring mix-blend-mode from elements in the backdrop by creating a different stack element.
Note:
- Isolate property is applied to the elements parent.
- Not supported by Internet Explorer.
Syntax:
isolation: auto|isolate|initial|inherit;
Default Value:
- auto
Property Values:
- auto: It is used the default. It creates a new stack element when required. It resets the isolate and allow blending.
- isolate: It prevents the element from blending. A new stacking element is created.
- initial: It sets the isolation property to its default value.
- inherit: This property is inherited from its parent.
Example:
html
<!DOCTYPE html><html> <head> <title> CSS | isolation Property </title> <style> .container { text-align: center; background-color: green; width: 400px; margin: auto; } .blend { width: 200px; height: 200px; mix-blend-mode: difference; } .isolate_enable { isolation: isolate; } </style> </head> <body> <div class="container"> <h3>Image without isolation</h3> <img class="blend" src= <div class="isolate_enable"> <h3>Image with isolation</h3> <img class="blend" src= </div> </div> </body></html> |
Output:
Supported Browsers: The browser supported by isolation property are listed below:
- Google Chrome 41.0
- Edge 79.0
- Firefox 36.0
- Safari 8.0
- Opera 30.0
Please Login to comment...