Die Suche nach einem festen Hintergrundeffekt mit Inline -Bildern

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!