CSS clip ominaisuus

Määrittely ja käyttö

clip-ominaisuus leikkaa absoluuttisesti sijoitetut elementit.

Mikä tapahtuu, jos kuvan koko on suurempi kuin sen sisältävän elementin koko? "clip"-ominaisuus mahdollistaa elementin näkyvän kohteen määrittämisen, jolloin elementti leikataan ja näytetään tällä muodolla.

Selitys

Tämä ominaisuus määrittelee leikkausrengas. Vakioasemassa olevan elementin sisällä oleva sisältö on näkyvää. Ulkopuolella oleva sisältö käsitellään overflow-arvon mukaan. Leikkausalue voi olla suurempi tai pienempi kuin elementin sisältöalue.

Lisäksi:

CSS-opetusohjelma:CSS-sijoittelu

HTML DOM -viittausoppikirja:clip-ominaisuus

esimerkki

Leikkaa kuva:

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

Kokeile itse

CSS-kieli

clip: auto|muoto|initial|inherit;

ominaisuusarvo

arvo kuvaus
muoto Aseta elementin muoto. Ainoa laillinen muotoarvo on: rect (ylä, oikea, alas, vasen)
auto Oletusarvo. Ei sovelleta leikkausta.
inherit Määritellään, että clip-ominaisuuden arvo pitäisi periä vanhemmalta elementiltä.

Tekninen yksityiskohta

Oletusarvo: auto
Perinnäisyys: ei
Versio: CSS2
JavaScript-kieli: objekti.style.clip="rect(0px,50px,50px,0px)"

Lisää esimerkkejä

Aseta elementin muoto
Tämä esimerkki näyttää, miten voit asettaa elementin muodon. Tämä elementti leikataan muotoon ja sitten näytetään.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimeen, joka täysin tukee kyseistä ominaisuutta.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 7.0