Wie funktioniert der Hintergrundanhang behoben?

Question

Ich habe einige Fragen zu Hintergrundbildern, wenn background-attachmentfixed gesetzt ist. Diese sind:

1. nehme ich eine Hintergrundbild auf ein div mit einer Breite von 500 Pixel und Höhe 500px mit 1px solid roten Rand. Wenn ich jetzt background-size: 100% 100% gebe. Warum ist die Größe des Hintergrundbildes etwas größer als 500 Pixel? Warum ändert sich die Größe des Hintergrundbilds, wenn ich die Größe des Ansichtsfensters ändere?

2. Wie lege ich dem Hintergrundbild eine Mindesthöhe fest, damit sich das Hintergrundbild bei einer Größenänderung nicht verkleinert?

Answer 1

1. Ihr Bild ist etwas größer als 500px, weil die Grenze als Teil des Bildes betrachtet wird. Ihr Hintergrundbild wird mit dieser Methode 502x502 sein.

2. Auf Ihrem Hintergrund können Sie eine maximale Breite und maximale Höhe zuweisen, damit das Bild nicht kleiner als eine ausgewählte Anzahl von Pixeln wird.

Warum die Größe des Hintergrundbild ändern, wenn ich ändern Sie die Größe der Ansichtsfenster?

Dies liegt daran, dass Sie die Bildgröße in% einstellen. Das% -Attribut nimmt% seiner Elterngröße an. In unserem Fall ist das übergeordnete Element das Ansichtsfenster (entspricht vh und vw) und ändert die Größe, wenn Sie die Größe des Darstellungsbereichs ändern.

Answer 2

Als Hintergrund ist fixed seine relativ zu body Elemente, deshalb als div zu größerer Breite Größe 100% 100% Ergebnisse einstellen, an dem Bild angewandt wird. Es ist gleich Körper width nicht div.

Wenn Sie feste height festlegen möchten, als Sie es gerade in px setzen müssen, aber in diesem Fall Bild wird nicht sein Verhältnis sparen:

div { 
 
    background: url(//c6.staticflickr.com/8/7389/26907631325_f8b05bb68d_c.jpg) fixed left top/100% 433px no-repeat; 
 
    width: 800px; 
 
    height: 433px; 
 
} 
 

 
html { 
 
    height: 10000px; 
 
}

<div> 
 
    
 
</div>