CSS isolation Property
The isolation property in CSS is used to define whether an element must create 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 element’s 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 allows 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: In this example, we are using the above-explained property.
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 = "https://media.w3wiki.net/wp-content/uploads/blank.png" > < div class = "isolate_enable" > < h3 >Image with isolation</ h3 > < img class = "blend" src = "https://media.w3wiki.net/wp-content/uploads/blank.png" > </ 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