ویژگی isolation در CSS

isolation Property

ویژگی isolation در CSS مشخص می کند که آیا عنصر جدای از دیگر عناصر عمل کند یا خیر.

نحوه نوشتار

isolation: auto;
isolation: isolate;

نکته: این ویژگی زمانی کاربرد دارد که از ویژگی mix-blend-mode استفاده شود.

مقادیر

auto​

در این حالت عنصر جداگانه عمل نمی کند. این مقدار پیشفرض است.

isolate​

در این حالت عنصر جداگانه عمل می کند.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم: (این ویژگی اکثرا در ارتباط با چگونگی نمایش تصویر یا رنگ پس زمینه عمل می کند.)

html

<div class="wrapper">
   <div class="title1">
       <h1>Amazon Jungle</h1>
   </div>
   <div class="title2">
       <h1>Amazon Jungle</h1>
    </div>
</div>

css

.wrapper {
    background-image: url(http://my-project.ir/img/Amazon.jpg);
    background-repeat: no-repeat;
    height: 433px;
    max-width: 650px;
    margin: 30px auto;
    padding-top: 100px;
}
h1 {
    text-align: center;
    color: #ffffff;
    background-color: purple;
    padding: 10px;
    mix-blend-mode: screen;
}
.title1 { 
    isolation: isolate; 
    position: absolute;
    top: 5em;
    width: 100%;
}
.title2 { 
    isolation: auto; 
    position: absolute;
    top: 10em;
    width: 100%;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی در CSS پشتیبانی می کنند.