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 پشتیبانی می کنند.