彈出縮放視圖

主視圖由靜態影像和顯示在靜態影像頂部彈出視圖中的縮放影像組成。 它也包含顯示在靜態影像頂端的提示訊息。

主檢視的CSS屬性

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

.s7flyoutviewer .s7flyoutzoomview

CSS屬性

說明

背景顏色

主視圖的背景顏色。

範例 — 若要讓主檢視透明：

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

提示訊息的CSS屬性

提示訊息的外觀由下列CSS類別選取器控制：

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

CSS屬性

說明

底部

從主視圖底部偏移。

color

文字色彩.

字型系列

字型名稱。

字型大小

字型大小.

填補

在訊息文字周圍填補。

背景顏色

消息文本的背景填充顏色。

邊框半徑

訊息文字的背景邊框半徑。

不透明度

消息文本的背景不透明度。

對於Internet Explorer 8，請使用 filter:alpha(opacity-..))

提示訊息可本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。

.

示例 — 要設定半透明的提示消息，其字型為白色Arial® 12像素，距主視圖底部50像素偏移，邊框間距和圓角：

.s7flyoutviewer .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);
}

本頁內容