Ιδιότητα clip

Η ιδιότητα clip επιτρέπει την περικοπή ενός απολύτως τοποθετημένου στοιχείου, αφήνοντας ορατή μόνο την καθορισμένη ορθογώνια περιοχή. Η τιμή καθορίζεται χρησιμοποιώντας τη συνάρτηση rect.

Σύνταξη

cssεπιλογέας {
  clip: rect(πάνω, δεξιά, κάτω, αριστερά) | auto;
}

Προετοιμασία εικόνων

Ας υποθέσουμε ότι έχουμε μια εικόνα φύσης την οποία θα περικόψουμε:

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

Результат:

Παράδειγμα

Ας περικόψουμε την εικόνα, αφήνοντας ορατό μόνο το κεντρικό μέρος:

html<div class="container">
  <img class="image" src="image.jpg">
</div>

css.container {
  position: relative;
  width: 400px;
  height: 300px;
}
.image {
  position: absolute;
  clip: rect(50px, 350px, 250px, 50px);
  width: 400px;
  height: 300px;
}

Результат:

Δείτε επίσης