彈出縮放視圖

主視圖由靜態影像、在靜態影像上方的彈出視圖中顯示的縮放影像、以及在靜態影像上方顯示的提示資訊組成。

主視圖的CSS屬性

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

.s7flyoutviewer .s7flyoutzoomview

CSS屬性

說明

背景色

主視圖的背景顏色。

示例——使主視圖透明:

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

提示訊息的CSS屬性

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

您可以透過CSS來設定字型樣式、大小外觀和垂直偏移。 不過,水準對齊方式是由檢視器邏輯管理。 不支援使用leftright屬性,透過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); 
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now