Flyout-Zoom-Ansicht

Im Inline-Zoom-Modus besteht die Hauptansicht aus dem statischen Ansicht, dem gezoomten Bild, das in der Flyout-Ansicht über dem statischen Bild angezeigt wird, und der Tipp-Meldung, die über dem statischen Bild angezeigt wird.

CSS-Eigenschaften des Haupt-Viewer-Bereichs

Das Erscheinungsbild der Hauptklasse wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7flyoutzoomview

CSS-Eigenschaft

Beschreibung

background-color

Die Hintergrundfarbe der Haupt-Ansicht.

Beispiel: So machen Sie die Ansicht transparent:

.s7mixedmediaviewer .s7flyoutzoomview { 
 background-color: transparent; 
}

Das Erscheinungsbild der Tipp-Meldung wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

Sie können Schriftschnitt, Größendarstellung und vertikalen Offset mithilfe von CSS konfigurieren. Die horizontale Ausrichtung wird jedoch von der Viewer-Logik verwaltet. Das Überschreiben durch CSS mit den Eigenschaften left oder right wird nicht unterstützt.

CSS-Eigenschaften der Tippmeldung

CSS-Eigenschaft

Beschreibung

background-color

Hintergrundfüllfarbe der Nachricht.

border-radius

Rahmenradius des Nachrichtenhintergrunds.

unten

Versatz unten in der Haupt-Ansicht.

color

Farbe des Tipp-Textes.

font-size

Schriftgröße.

font-family

Schriftfamilie.

Deckkraft

Hintergrunddeckkraft der Nachricht.

Padding

Umrandung des Nachrichtentextes.

Die Tippmeldung kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Um eine halbtransparente Tipp-Meldung mit einer weißen Arial-12-Pixel-Schrift einzurichten, werden 50 Pixel vom unteren Rand der Ansicht, der Auffüllung und einem gerundeten Rand versetzt:

.s7mixedmediaviewer .s7flyoutzoomview .s7tip { 
bottom: 50px; 
color: #ffffff; 
font-family: Arial; 
font-size: 12px; 
padding-bottom: 10px; 
padding-top: 10px; 
padding-left: 12px; 
padding-right: 12px; 
background-color: #000000; 
border-radius: 4px; 
opacity: 0.5; 
filter: alpha(opacity = 50); 
}

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now