ฉันจะแสดงเพียงบางส่วนของรูปภาพใน HTML / CSS ได้อย่างไร

สมมติว่าฉันต้องการวิธีแสดงเพียงกึ่งกลาง 50x50px ของรูปภาพที่ 250x250px ใน HTML ฉันจะทำสิ่งนั้นได้อย่างไร นอกจากนี้ยังมีวิธีทำเช่นนี้สำหรับการอ้างอิง css: url () หรือไม่

ฉันรู้เรื่องคลิปใน CSS แต่ดูเหมือนว่าจะใช้ได้เฉพาะเมื่อใช้กับการจัดตำแหน่งที่แน่นอน

วิธีหนึ่งที่ทำได้คือตั้งค่าภาพที่คุณต้องการแสดงเป็นพื้นหลังในคอนเทนเนอร์ (td, div, span ฯลฯ ) จากนั้นปรับตำแหน่งพื้นหลังเพื่อให้ได้ sprite ที่คุณต้องการ

ดังที่กล่าวไว้ในคำถามมีclipคุณสมบัติ css แม้ว่ามันจะต้องการให้องค์ประกอบที่ถูกตัดคือposition: absolute;(ซึ่งเป็นความอัปยศ):

.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>

การสาธิต JS Fiddleสำหรับการทดลอง

เพื่อเสริมคำตอบดั้งเดิม - ค่อนข้างล่าช้า - ฉันกำลังแก้ไขเพื่อแสดงการใช้งานclip-pathซึ่งได้แทนที่clipคุณสมบัติที่เลิกใช้แล้วในขณะนี้

clip-pathที่พักอนุญาตให้ช่วงของตัวเลือก (มากขึ้นกว่าเดิมclip) ของ:

• inset- สี่เหลี่ยม / รูปทรงลูกบาศก์ที่กำหนดไว้กับสี่ค่าเป็น (top right bottom left)'ระยะห่างจาก'
• circlecircle(diameter at x-coordinate y-coordinate)-
• ellipseellipse(x-axis-length y-axis-length at x-coordinate y-coordinate)-
• polygon- กำหนดโดยชุดของx/yพิกัดที่สัมพันธ์กับที่มาขององค์ประกอบของมุมซ้ายบน ในฐานะที่เป็นเส้นทางถูกปิดโดยอัตโนมัติจำนวนขั้นต่ำที่เป็นจริงของคะแนนสำหรับรูปหลายเหลี่ยมควรจะสามใด ๆ น้อย (สอง) เป็นเส้นหรือ (หนึ่ง) polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...])เป็นจุด:
• url - นี่อาจเป็น URL ท้องถิ่น (โดยใช้ CSS id-selector) หรือ URL ของไฟล์ภายนอก (โดยใช้เส้นทางไฟล์) เพื่อระบุ SVG แม้ว่าฉันยังไม่ได้ทดลองด้วย (เช่น) ดังนั้นฉันจึง ไม่สามารถให้ข้อมูลเชิงลึกเกี่ยวกับประโยชน์หรือข้อแม้ของพวกเขา

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>

การสาธิต JS Fiddleสำหรับการทดลอง

อ้างอิง:

• clip- หมายเหตุ: เลิก
• clip-path(MDN)
• clip-path(W3C)

อีกทางเลือกหนึ่งคือสิ่งต่อไปนี้แม้ว่าจะไม่ใช่ภาพที่สะอาดที่สุด แต่ก็ถือว่าภาพเป็นองค์ประกอบเดียวในภาชนะเช่นในกรณีนี้:

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

จากนั้นคุณสามารถใช้คอนเทนเนอร์เป็นหน้ากากที่มีขนาดที่ต้องการและล้อมรอบรูปภาพด้วยระยะขอบลบเพื่อย้ายไปไว้ในตำแหน่งที่ถูกต้อง:

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

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

การสาธิตสามารถเห็นได้ในJSFiddleนี้

ดูเหมือนว่าจะใช้งานได้ใน IE> 9 เท่านั้นและอาจเป็นเบราว์เซอร์รุ่นอื่น ๆ ที่สำคัญทั้งหมด