Как отобразить часть изображения с помощью 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;. Если ваш контейнер теперь меньше вашего фонового изображения, он просто скрывается сверху, потому что он выровнен по низу.

В этом примере высота фоновых изображений составляет 400px, а высота контейнеров только 300px:

.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); 
     }