АКЦЫЯ: бясплатныя месячныя курсы па стварэнні сайтаў
на выбар: вёрстка, JavaScript, PHP, Python або фрэймворкі. Сёння апошні дзень для запісу! Націскай!
101 of 313 menu

Уласцівасць clip

Уласцівасць clip дазваляе абрэзаць абсалютна пазіцыянаваны элемент, пакідаючы бачнай толькі ўказаную прамавугольную вобласць. Значэнне задаецца з дапамогай функцыі rect.

Сінтаксіс

селектар { clip: rect(верх, права, ніз, лева) | auto; }

Падрыхтоўка выяў

Няхай у нас ёсць выява прыроды, якую мы будзем абрэзаць:

<img src="image.jpg" width="500">

:

Прыклад

Абрэжам выяву, пакідаючы бачнай толькі цэнтральную частку:

<div class="container"> <img class="image" src="image.jpg"> </div> .container { position: relative; width: 400px; height: 300px; } .image { position: absolute; clip: rect(50px, 350px, 250px, 50px); width: 400px; height: 300px; }

:

Глядзіце таксама

  • уласцівасць clip-path,
    сучасная альтэрнатыва для абрэзкі элементаў
  • уласцівасць mask,
    якое дазваляе накладваць маску
  • уласцівасць position,
    неабходнае для работы clip
  • уласцівасць overflow,
    якое таксама можа хаваць часткі змесціва
byenru