主檢視由靜態影像和彈出式檢視中顯示的縮放影像組成。 此外也包含顯示在靜態影像上的反白顯示導覽區域,以及顯示在靜態影像頂端的提示訊息。
如果正在檢視的影像尺寸不符合彈出式縮放檢視的尺寸,則影像內容會置中於彈出式縮放檢視的矩形顯示區域中。
主檢視的CSS屬性
主檢視的外觀由下列CSS類別選取器控制:
.s7flyoutviewer .s7flyoutzoomview
CSS屬性 |
說明 |
---|---|
background-color |
主要檢視的背景顏色。 |
範例 — 讓主檢視透明:
.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屬性 |
說明 |
---|---|
background-color |
反白顯示的色彩。 |
不透明度 |
反白顯示不透明度。 若為Internet Explorer 8,請使用 濾鏡:alpha(不透明度 — ...) ); |
border |
邊框反白顯示。 |
範例 — 若要設定透明度為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屬性 |
說明 |
---|---|
background-image |
游標圖稿。 |
width |
游標寬度。 |
height |
游標高度。 |
游標支援 input
屬性選取器,可用於針對不同裝置套用不同的游標圖稿和大小。 尤其是, input="mouse"
對應至桌上型電腦系統和 input="touch"
對應至觸控裝置。
覆蓋圖的CSS屬性
當 overlay
引數已設為 1
,反白顯示影格或游標影像周圍的區域是由CSS類別選取器所控制:
.s7flyoutviewer .s7flyoutzoomview
.s7overlay
CSS屬性 |
說明 |
---|---|
background-color |
覆蓋圖顏色。 |
不透明度 |
覆蓋不透明度。 |
提示訊息的CSS屬性
使用下列CSS類別選取器可控制提示訊息的外觀:
.s7flyoutviewer .s7flyoutzoomview .s7tip
您可以透過CSS設定字型樣式、大小、外觀和垂直位移。 不過,水準對齊方式是由檢視器邏輯管理。 透過CSS覆寫它,使用 left
或 right
屬性不受支援。
CSS屬性 |
說明 |
---|---|
底部 |
從主檢視底部的位移。 |
color |
文字色彩。 |
font-family |
字型名稱。 |
font-size |
字型大小. |
填補 |
訊息文字的邊框間距。 |
background-color |
訊息文字的背景填色色彩。 |
border-radius |
訊息文字的背景邊框半徑。 |
不透明度 |
訊息文字的背景不透明度。 若為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);
}