如何用CSS顯示圖像的一部分？

Question

我有一個圖像被用作1400x350的橫幅，我想顯示它的80％的高度。我不想縮放圖像，我只需要顯示它的一部分。想象一下汽車的照片，我想從輪胎上方展示。

我找到的所有東西都顯示如何縮放或調整圖像大小，但仍顯示原始圖像的100％。我只想看到原始圖像的一部分。我可以在圖像編輯器中手動裁剪圖像，但我希望能夠用CSS做到這一點。

我在此刻用div作爲背景。

div.banner { 
    content: url('../Images/banner.jpg'); 
    background-color: #A5B7C7; 
}​ 

<div class="banner"></div> 

Answer 1

這可以簡單地通過設置background-position: center bottom;來實現。如果您的容器現在小於背景圖片，則它會隱藏在頂部，因爲它與底部對齊。

在這個例子中，背景圖像高度爲400像素，但容器高度僅爲300像素：

.banner { 
 
    background: url('https://placehold.it/300x400'); 
 
    background-position: center bottom; 
 
    height: 300px; 
 
    width: 300px; 
 
}

<div class="banner"></div>

Answer 2

U可以通過後臺位置調整，得到圖像的一部分ü希望。

Answer 3

您可以通過使用剪輯屬性，爲此，你需要保持立場絕對或固定 http://www.w3schools.com/cssref/pr_pos_clip.asp

這裏跟你的形象的例子實現這一目標：http://jsfiddle.net/2U3CE/1/

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