主視圖由靜態影像和彈出視圖中顯示的縮放影像組成。 它還包含顯示在靜態影像上的突出顯示導航區域,以及顯示在靜態影像上的提示消息。
如果所查看影像的尺寸與彈出縮放視圖的尺寸不匹配,則影像內容會置於彈出縮放視圖的矩形顯示區域中。
主檢視的CSS屬性
主要檢視的外觀由下列CSS類別選取器控制:
.s7flyoutviewer .s7flyoutzoomview
CSS屬性 |
說明 |
---|---|
背景顏色 |
主視圖的背景顏色。 |
範例 — 若要讓主檢視透明:
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
飛出檢視的CSS屬性
飛出檢視的外觀由下列CSS類別選取器控制:
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
CSS屬性 |
說明 |
---|---|
左側 |
彈出視圖相對於主視圖左上角的水準位置。 |
頂部 |
彈出視圖的垂直位置,相對於主視圖的左上角。 |
width |
彈出視圖的寬度。 |
height |
彈出視圖的高度。 |
border |
彈出視圖的邊框。 |
範例 — 若要將彈出檢視設為600 x 400像素,以100像素的位移顯示,而512 x 288主檢視的右側有上一個範例所示:
.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-..)); |
邊框 |
邊框醒目提示。 |
範例:若要設定透明度為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來設定字型樣式、大小、外觀和垂直偏移。 不過,水準對齊方式是由檢視器邏輯管理。 透過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);
}