主視圖由靜態影像、放大影像、高亮導航區域和提示資訊組成。

如果所檢視的影像尺寸不符合彈出縮放檢視的尺寸，影像內容會置於彈出縮放檢視的矩形顯示區域中。

主視圖的CSS屬性

主檢視的外觀是使用下列CSS類別選擇器來控制：

.s7flyoutviewer .s7flyoutzoomview

CSS屬性	說明
背景色	主視圖的背景顏色。

示例——使主視圖透明：

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

彈出檢視的CSS屬性

彈出檢視的外觀是使用下列CSS類別選取器來控制：

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

CSS屬性	說明
左側	彈出視圖相對於主視圖左上角的水準位置。
頂部	彈出視圖相對於主視圖左上角的垂直位置。
width	彈出視圖的寬度。
height	彈出式視圖的高度。
border	飛出視圖的邊界。

範例——若要將彈出式檢視設為600 x 400像素，在上例中顯示的512 x 288主檢視右側偏移100像素：

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom { 
 left: 612px; 
 top: 0px; 
 width: 600px; 
 height: 400px;  
}

主檢視中反白顯示的CSS屬性

主檢視中反白顯示的外觀會使用下列CSS類別選擇器加以控制：

.s7flyoutviewer .s7flyoutzoomview .s7highlight

您可使用CSS來控制背景、邊框、透明度和類似屬性。不過，反白顯示DOM元素的大小和位置由檢視器邏輯管理。不支援透過CSS覆寫它。

CSS屬性	說明
背景色	反白顯示的顏色。
不透明度	反白顯示不透明度。對於Internet Explorer 8，請使用 filter:alpha(opacity-...);
邊界	邊框反白顯示。

CSS屬性

說明

背景色

反白顯示的顏色。

不透明度

反白顯示不透明度。

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

邊界

邊框反白顯示。

範例——若要設定具有40%透明度的綠色反白顯示，以及一個像素紅色邊框：

.s7flyoutviewer .s7flyoutzoomview .s7highlight { 
 background-color: green; 
 opacity: 0.4;  
 filter: alpha(opacity = 40); 
 border: 1px solid red; 
}

游標的CSS屬性

當highlightmode參數設為cursor時，主視圖中的反白顯示將替換為固定大小的游標圖稿，該圖稿由CSS類選擇器控制：

 .s7flyoutviewer .s7flyoutzoomview 
.s7cursor

您可以使用CSS來控制背景影像和大小。

適用的CSS屬性包括：

CSS屬性	說明
背景影像	游標圖稿。
寬度	游標寬度。
高度	游標高度。

注意

游標支援input屬性選擇器，它可用於為不同設備應用不同的游標圖稿和大小。尤其是，input="mouse"對應於案頭系統，input="touch"對應於觸摸設備。

覆蓋的CSS屬性

當overlay參數設為1時，會使用CSS類別選擇器控制反白顯示影格或游標影像的周圍區域：

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

CSS屬性	說明
背景色	覆蓋顏色。
不透明度	覆蓋不透明度。

提示訊息的CSS屬性

提示訊息的外觀是使用下列CSS類別選擇器來控制：

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

CSS屬性	說明
底部	從主視圖底部偏移。
color	文字色彩.
font-family	字型名稱。
字型大小	字型大小.
填補	在消息文本週圍填充。
背景色	訊息文字的背景填色顏色。
邊框半徑	消息文本的背景邊框半徑。
不透明度	訊息文字的背景不透明度。對於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); 
}