Flyout-Zoom-Ansicht flyout-zoom-view

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

CSS-Eigenschaften des Haupt-Viewer-Bereichs

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

.s7mixedmediaviewer .s7flyoutzoomview
CSS-Eigenschaft
Beschreibung
background-color
Die Hintergrundfarbe der Hauptansicht.

Beispiel - um die Hauptansicht transparent zu machen:

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

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

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

Es ist möglich, Schriftstil, Größenaussehen und vertikalen Versatz über CSS zu 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
Füllfarbe für den Nachrichtenhintergrund.
border-radius
Radius des Nachrichtenhintergrunds.
unten
Versatz unten in der Hauptansicht.
color
Farbe für Tipp-Text.
font-size
Schriftgröße.
Schriftfamilie
Schriftfamilie.
Deckkraft
Deckkraft des Nachrichtenhintergrunds.
Auffüllung
Auffüllung um den Nachrichtentext.

Die Tipp-Nachricht kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen .

Beispiel: So richten Sie eine halbtransparente Tipp-Meldung mit weißer Arial® 12-px-Schriftart ein, die 50 Pixel vom unteren Rand der Hauptansicht, des Abstands und eines gerundeten Rahmens entfernt ist:

.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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8