Farbverlaufshintergrund auf Anlagebild-Widgets

Warnung

Wir raten dringend davon ab, benutzer­­definierte Hintergrund­­verläufe zu verwenden. Benutzer­­definierte Farben passen sich nicht an den aktuellen hellen oder dunklen Modus des Betriebs­­systems oder die Präferenz des Benutzers an, was zu einer verringerten Lesbarkeit und Barriere­­freiheit aufgrund schlechten Kontrasts führen kann, insbesondere wenn Sie Shapes verwenden, die sich eben doch dem aktuellen Modus des Betriebs­­systems anpassen (siehe Kontext­­abhängige Farben).

Die empfohlene Einstellung ist es, die Hintergrund­­farbe undefiniert zu lassen und keinen Farb­­verlaufs­­hintergrund mit benutzer­­definierten Farbe zu verwenden, damit der Browser automatisch die beste passende Hintergrund­­farbe für den aktuellen Modus bestimmen kann. Dies führt in der Regel zu einem optimalen Kontrast.

Wenn Sie dennoch einen benutzer­­definierten Verlauf hinzufügen und die möglichen negativen Auswirkungen auf die Barriere­­freiheit in Kauf nehmen möchten, befolgen Sie diese Schritte:

  1. Erstellen Sie ein benutzer­­definiertes Shape mit einer Verlauf­­füllung. Verwenden Sie wenn möglich Farben mit einem hohen Transparenz­­wert, damit die Hintergrund­­farbe des Browsers weiterhin durchscheinen kann, wodurch Kontrast­­probleme reduziert werden. Setzen Sie die Breite und Höhe des SVGs auf das Dreifache der Größe der Anlagebild­­seite, um sicherzustellen, dass der gesamte Hintergrund abgedeckt ist, unabhängig von der Zoomstufe des Widgets. Am Ende dieser Seite finden Sie ein Beispiel.

  2. Gehen Sie zu Ihrem Anlagebild. Deaktivieren Sie in der Eigenschaften-Seitenleiste die Option Seiteninhalt anpassen und legen Sie eine feste Seitengröße fest, die 3-mal kleiner als die Größe des Verlauf-Shapes ist.

  3. Platzieren Sie das Verlauf-Shape auf dem Anlagebild und verschieben Sie es ganz nach hinten, damit es hinter allen anderen Shapes angezeigt wird.

  4. Aktivieren Sie bei ausgewähltem Shape die Option Shape sperren in der Eigenschaften-Seitenleiste.

  5. Stellen Sie sicher, dass die X-Position des Shapes auf \(-(\text{Seitenbreite} / 3)\) und die Y-Position auf \(-(\text{Seitenhöhe} / 3)\) gesetzt ist. Wenn dies korrekt gemacht wird, sollte sich der lineare Verlauf auf allen Seiten über die Ränder des Anlagebildes hinaus erstrecken. Wenn Sie den Bearbeitungs­­modus verlassen, wird das Anlagebild mit seiner Ausgangs-Zoomstufe zentriert und der Verlauf deckt den gesamten Hintergrund ab.

Beispiel

Dieses Beispiel geht davon aus, dass die Anlagebildseite 1920 × 1080 groß ist, wodurch die Größe des Shapes auf 5760 × 3240 und seine X- und Y-Position beim Platzieren auf einem Anlagebild auf -1920 bzw. -1080 gesetzt werden sollte.

<svg width="5760" height="3240" viewBox="0 0 5760 3240" xmlns="http://www.w3.org/2000/svg">
  <defs>
        <linearGradient id="CustomLinearBackground" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="33%" stop-color="#FFFFFF" stop-opacity="0.3"></stop>
        <stop offset="67%" stop-color="#000000" stop-opacity="0.3"></stop>
        </linearGradient>
  </defs>
  <rect x="0" y="0" width="5760" height="3240" fill="url(#CustomLinearBackground)"/>
</svg>

Beachten Sie, dass der Verlauf nur von 33 % bis 67 % der Höhe des Shapes verläuft, um sicherzustellen, dass der Verlauf nur den Teil abdeckt, der auf dem Anlagebild bei der Standard-Zoomstufe sichtbar ist.

../../_images/gradient-background-shape-placement.webp ../../_images/gradient-background.webp

Links: Größe und Platzierung des Verlauf-Shapes (mit dem gestrichelten Auswahlrahmen) relativ zur Anlagebildseite in der Mitte. Rechts: Das resultierende Anlagebild in der Standard-Zoomstufe.