Bagaimana saya bisa menampilkan hanya sebagian dari gambar dalam HTML / CSS?

Katakanlah saya ingin cara untuk menampilkan hanya 50x50px tengah gambar yang berukuran 250x250px dalam HTML. Bagaimana saya bisa melakukan itu. Juga, apakah ada cara untuk melakukan ini untuk referensi css: url ()?

Saya mengetahui klip di CSS, tetapi tampaknya hanya berfungsi jika digunakan dengan pemosisian absolut.

Salah satu cara untuk melakukannya adalah dengan mengatur gambar yang ingin Anda tampilkan sebagai latar belakang dalam wadah (td, div, span dll) dan kemudian menyesuaikan posisi latar belakang untuk mendapatkan sprite yang Anda inginkan.

Seperti yang disebutkan dalam pertanyaan, ada clipproperti css, meskipun memang membutuhkan elemen yang dipotong adalah position: absolute;(yang memalukan):

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}

<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

Demo JS Fiddle , untuk eksperimen.

Untuk melengkapi jawaban asli - agak terlambat - saya sedang mengedit untuk menunjukkan penggunaan clip-path, yang telah menggantikan properti yang sekarang tidak digunakan lagi clip.

The clip-pathproperti memungkinkan berbagai pilihan (lebih-jadi daripada yang asli clip), dari:

• inset- bentuk persegi panjang / kubus, didefinisikan dengan empat nilai sebagai 'jarak-dari' (top right bottom left).
• circle- circle(diameter at x-coordinate y-coordinate).
• ellipse- ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).
• polygon- ditentukan oleh serangkaian koordinat x/ ydalam kaitannya dengan asal elemen di sudut kiri atas. Sebagai jalur itu ditutup secara otomatis jumlah minimum realistis poin untuk poligon harus tiga, setiap sedikit (dua) adalah garis atau (satu) adalah titik: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - ini bisa berupa URL lokal (menggunakan pemilih id CSS) atau URL file eksternal (menggunakan jalur file) untuk mengidentifikasi SVG, meskipun saya belum bereksperimen dengan keduanya (hingga saat ini), jadi saya tidak dapat menawarkan wawasan tentang manfaat atau peringatan mereka.

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

Demo JS Fiddle , untuk eksperimen.

Referensi:

• clip- catatan: tidak digunakan lagi .
• clip-path(MDN) .
• clip-path(W3C) .

Alternatif lainnya adalah sebagai berikut, meskipun bukan yang terbersih karena mengasumsikan gambar menjadi satu-satunya elemen dalam penampung, seperti dalam kasus ini:

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

Anda kemudian dapat menggunakan wadah sebagai masker dengan ukuran yang diinginkan, dan mengelilingi gambar dengan margin negatif untuk memindahkannya ke posisi yang benar:

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

Demo bisa dilihat di JSFiddle ini .

Sepertinya hanya berfungsi di IE> 9, dan mungkin semua versi penting dari semua browser lainnya.

sesuaikan posisi latar belakang untuk memindahkan gambar latar belakang dalam posisi div yang berbeda

div { 
       backgroud-image: url('image url')
       background-position: 0 -250px; 
    }