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

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

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

我在此刻用div作爲背景。

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

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

來源

2016-10-26 Caverman

如果你設置圖像作爲「背景圖像」，你是否嘗試過使用'background-size' css屬性作爲百分比來縮放圖像，裁剪它？ –

[我怎樣才能在HTML/CSS中顯示圖像的一部分？]（https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion-of- an-image-in-html-css） – Steven

這可以簡單地通過設置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>

來源

2016-10-26 18:07:27 andreas

謝謝，這看起來好像會起作用。 – Caverman

很高興能幫到你！ – andreas

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

來源

2016-10-26 18:07:45 Manickus

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

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

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

來源

2016-10-26 18:11:46

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

回答

相關問題