ویژگی clip در CSS

clip Property

ویژگی clip در CSS مشخص می کند که چه قسمتی از عنصر دیده شود. این ویژگی زمانی کارایی دارد که مقدار ویژگی position در عنصر برابر absolute یا fixed باشد.

نحوه نوشتار

clip: auto;
clip: rect(275px, 575px, 425px, 365px);
clip: rect(10px, 1em, 1rem, 30px);

مقادیر

auto​

عنصر برش نمی خورد. این مقدار پیشفرض است.

()rect​

عنصر را طبق مقادیر داده شده برش می دهد: rect (top, right, bottom, left)

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="org">
   <img class="orginal" src="http://my-project.ir/img/horse.jpg" />
</div>
<div class="box">
    <img class="pic" src="http://my-project.ir/img/horse.jpg" />
</div>

css

.box {
    position: relative;
    width: 350px;
    height: 233px;
    background-color: pink;
 }
.orginal {
    width: 350px;
}
.pic {
    position: absolute;
    width: 100%;
    left: 0;
    clip: rect(30px, 310px, 180px, 200px);
}

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

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