彈出式縮放檢視 flyout-zoom-view
主檢視由靜態影像和彈出式檢視中顯示的縮放影像組成。 此外也包含顯示在靜態影像上的反白導覽區域，以及顯示在靜態影像頂端的提示訊息。
如果正在檢視的影像尺寸不符合彈出式縮放檢視的尺寸，則影像內容會置中於彈出式縮放檢視的矩形顯示區域中。
主要檢視的 CSS屬性
主檢視的外觀是由下列CSS類別選取器所控制：
.s7flyoutviewer .s7flyoutzoomview
範例 — 讓主檢視透明：
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
彈出式檢視的 CSS屬性
彈出式檢視的外觀是由下列CSS類別選取器所控制：
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
範例 — 將彈出式檢視設定為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加以覆寫。
反白顯示不透明度。
對於Internet Explorer 8，請使用篩選器：alpha（不透明度 — ...） )；
範例 — 若要設定透明度為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屬性包括：
input屬性選取器，可用來針對不同的裝置套用不同的游標圖稿和大小。 特別是，input="mouse"對應至桌上型電腦系統，input="touch"對應至觸控裝置。覆蓋的 CSS屬性
當overlay引數設為1時，反白顯示影格或游標影像周圍的區域會由CSS類別選取器控制：
.s7flyoutviewer .s7flyoutzoomview
.s7overlay
提示訊息的 CSS屬性
使用下列CSS類別選取器來控制提示訊息的外觀：
.s7flyoutviewer .s7flyoutzoomview .s7tip
您可以透過CSS設定字型樣式、大小、外觀和垂直位移。 不過，水準對齊是由檢視器邏輯管理。 不支援使用left或right屬性透過CSS覆寫它。
訊息文字的背景不透明度。
對於Internet Explorer 8，請使用篩選器：alpha（不透明度 — ...） )
提示訊息可本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。
範例 — 若要使用白色Arial® 12-px字型、距主檢視底部位移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);
}