彈出式縮放檢視 flyout-zoom-view

在內嵌縮放模式中,主檢視由靜態影像組成。 此外也包含顯示在靜態影像上方的彈出式檢視中的縮放影像,以及顯示在靜態影像上方的提示訊息。

主要檢視器區域的CSS屬性

主檢視的外觀由下列CSS類別選取器控制:

.s7mixedmediaviewer .s7flyoutzoomview
CSS屬性
說明
background-color
主要檢視的背景顏色。

範例 — 讓主檢視透明:

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

使用下列CSS類別選取器可控制提示訊息的外觀:

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

您可以透過CSS設定字型樣式、大小外觀和垂直位移。 不過,水準對齊方式是由檢視器邏輯管理。 透過CSS覆寫它,使用 leftright 屬性不受支援。

提示訊息的CSS屬性

CSS屬性
說明
background-color
訊息背景填滿色彩。
border-radius
訊息背景邊框半徑。
底部
從主檢視底部的位移。
color
提示文字色彩。
font-size
字型大小.
font-family
字型系列。
不透明度
訊息背景不透明度。
填補
訊息文字的邊框間距。

提示訊息可以本地化。 另請參閱 使用者介面元素的本地化 以取得詳細資訊。

範例 — 若要以白色Arial® 12-px字型、距主檢視底部50畫素的位移、內距和圓角邊框來設定半透明提示訊息:

.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