如何使用CSS在圖像上顯示區域

Question

我有一個125x250圖像，我只需要顯示它的125x125區域。
我可以通過CSS來做到這一點嗎？怎麼樣？

謝謝

Answer 1

還有就是CSS clip屬性，但它是一個有點笨重成立，正如@edd在他的回答中指出，適用於只是絕對和固定定位圖像。

我個人將創建一個125x125像素div，並根據不同的情況，無論是

• 有圖像是div的background-image（你甚至可以使用background-position

• 把圖像中的位置它它，並給予divoverflow: hidden（優點：它仍然是一個帶有ALT文本的圖像元素）

如果您需要整個事物像文檔流中的圖像那樣工作，您可以給divdisplay: inline-block屬性（舊版IE不支持）。

Answer 2

您可以使用CSS Clip屬性，但設置起來有點費勁，因爲圖像和父級需要是固定位置的絕對位置。但是一旦安裝，它確實工作得很好。

例如：

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

Answer 3

這種技術也被稱爲 「子畫面」。一個ALA article from 2004演示了基礎知識，另一個很好的和簡短的介紹可以在w3schools找到（www.w3schools.com/css/css_image_sprites.asp）。

所以它基本上是一個父元素定位relative。子元素具有已定義的大小和背景，如background:url("sprite.png") 0 0;。要使用精靈的另一部分，例如在另一個子元素中，您可以定義background:url("sprite.png") -125 0;。

Answer 4

把你的形象裏div

<div style="width: 125px; height: 125px; overflow: hidden;"> 
    <img src="..." /> 
</div>