Kürzlich brauchte ich w?hrend der Arbeit an einem Kundenprojekt einen bestimmten visuellen Effekt für ein Bild. Hintergrundbilder unter Verwendung von background-attachment: fixed; Erreichen Sie diesen festen Scrolling -Effekt leicht - das Bild bleibt station?r, auch wenn die Seite scrolls. Dieser Effekt kann zwar nicht h?ufig verwendet werden, aber insbesondere wenn es subtil angewendet wird.

Inhaltsverzeichnis

• Warum benutzen<img alt="Die Suche nach einem festen Hintergrundeffekt mit Inline -Bildern" > Anstelle von background-image ?
• Verwenden von CSS background-image
• Der clip-path -Trick für Inline-Bilder
• Ein besserer Ansatz?

Zun?chst wollte ich diesen festen Effekt mit einem Inline -Bild replizieren (<img alt="Die Suche nach einem festen Hintergrundeffekt mit Inline -Bildern" > ) anstelle eines CSS -Hintergrundbildes. Eine Demonstration des gewünschten Effekts ist hier verfügbar. Der Code für diese Demo befindet sich in diesem Git -Repository (Hinweis: Dies ist ein Next.js -Projekt). Ein vereinfachtes CODEPEN -Beispiel mit RAW HTML folgt.

Warum benutzen<img alt="Die Suche nach einem festen Hintergrundeffekt mit Inline -Bildern" > Anstelle von background-image ?

Mehrere Gründe motivierten meine Pr?ferenz für die<img alt="Die Suche nach einem festen Hintergrundeffekt mit Inline -Bildern" > Etikett:

• Einfacheres faules Laden.
• Verbesserte SEO und Zug?nglichkeit über alt -Text.
• Optimierte Ladeleistung unter Verwendung von srcset / sizes .
• Browser-optimierte Bildauswahl über die<picture></picture> Etikett.
• Direktes Bildsparen für Benutzer (ohne Devtools).

Verwenden der<img alt="Die Suche nach einem festen Hintergrundeffekt mit Inline -Bildern" > Tag ist im Allgemeinen vorzuziehen, wenn das Bild eher als Inhalt als blo?e Dekoration betrachtet wird. Meine L?sung umfasste die clip-path CSS-Eigenschaft. Vergleichen wir dies mit der background-image Methode.

1. Verwenden Sie CSS background-image

Der traditionelle Ansatz verwendet background-image :

 .hero-Abschnitt {
  Hintergrund-Image: URL ("nice_bg_image.jpg");
  Hintergrundrepeat: No-Repeat;
  Hintergrundgr??e: Cover;
  Hintergrundposition: Zentrum;
  Hintergrundantrieb: behoben;
}

Diese Methode hat jedoch Einschr?nkungen. Das Bild wird nicht als Inhalt behandelt und die Zug?nglichkeit beeinflusst (Bildschirmleser). Es funktioniert auch optimal, wenn das Bild im Ansichtsfenster füllt oder zentriert ist. Im Off-Center-Bilder sind Medienabfragen für die ordnungsgem??e Positionierung auf verschiedenen Ger?ten erforderlich.

2. Verwenden Sie den clip-path -Trick auf einem Inline-Bild

Eine Stapelüberlaufl?sung mit clip-path bietet eine Alternative:

 .image-container {
  Position: Relativ;
  H?he: 200px;
  Clip-Pfad: Einschub (0);
}

.Bild {
  Objekt-Fit: Deckung;
  Position: fest;
  links: 0;
  Top: 0;
  Breite: 100%;
  H?he: 100%;
}

Dieser Ansatz beibeh?lt die<img alt="Die Suche nach einem festen Hintergrundeffekt mit Inline -Bildern" > Die Vorteile des Tags. Es ist jedoch weniger pr?zise und clip-path ist Herausforderungen. Ein einfaches Styling wie border-radius erfordert beispielsweise ?nderungen am clip-path selbst. Eine pr?zise Bildpositionierung im clip-path kann ebenfalls komplex sein.

Ein besserer Ansatz?

Letztendlich kehrte ich zur Verwendung von CSS background-image zurück und erkannte seine Grenzen an. Hat jemand diesen festen Scrolling -Effekt erfolgreich mit einem Inline -Bild eleganter implementiert? Ich würde mich freuen, Ihre L?sungen zu h?ren!

Das obige ist der detaillierte Inhalt vonDie Suche nach einem festen Hintergrundeffekt mit Inline -Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!