Wie wird ein Teil eines Bildes mit CSS angezeigt?

Question

Ich habe ein Bild als Banner, das 1400x350 ist und ich möchte vielleicht 80% seiner Höhe anzeigen. Ich möchte das Bild nicht skalieren, ich muss nur einen Teil davon anzeigen. Stellen Sie sich ein Bild von einem Auto vor und ich möchte von den gerade über den Reifen aufsteigen.

Alles, was ich gefunden habe, zeigt, wie man das Bild skaliert oder die Größe ändert, aber immer noch 100% des Originalbildes zeigt. Ich möchte nur einen Teil des Originalbildes anzeigen. Ich kann das Bild manuell in einem Bildbearbeitungsprogramm zuschneiden, aber ich hoffe, dass ich das mit CSS machen kann.

Ich verwende dies als Hintergrund in einem div im Moment.

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

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

Answer 1

Dies kann einfach durch das Setzen background-position: center bottom; erreicht werden. Wenn Ihr Container jetzt kleiner als Ihr Hintergrundbild ist, wird er nur oben angezeigt, da er nach unten ausgerichtet ist.

In diesem Beispiel wird die Hintergrundbilder Höhe 400px, aber die Behälter Höhe ist nur 300px:

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

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

Answer 2

U durch Hintergrund-Position einstellen kann einen Teil des Bildes erhalten u wollen .

Answer 3

Sie können dies erreichen, indem Clip-Eigenschaft verwenden, für diese Sie brauchen Position zu halten, entweder absolut oder Fest http://www.w3schools.com/cssref/pr_pos_clip.asp

Hier ein Beispiel mit Ihrem Bild: http://jsfiddle.net/2U3CE/1/

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