弹出缩放视图

在内联缩放模式下,主视图由静态图像、在弹出视图中显示的缩放图像以及在静态图像顶部显示的提示消息组成。

主查看器区域的CSS属性

主视图的外观通过以下CSS类选择器进行控制:

.s7mixedmediaviewer .s7flyoutzoomview

CSS属性

说明

背景颜色

主视图的背景颜色。

示例 — 使主视图透明:

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

使用以下CSS类选择器控制提示消息的外观:

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

可以通过CSS配置字体样式、大小外观和垂直偏移。 但是,水平对齐由查看器逻辑管理。 不支持使用leftright属性通过CSS覆盖该域。

提示消息的CSS属性

CSS属性

说明

背景颜色

消息背景填充颜色。

边框半径

消息背景边框半径。

底部

从主视图底部偏移。

color

提示文本颜色。

字体大小

字体大小.

字体系列

字体系列。

不透明度

消息背景不透明度。

填充

在消息文本周围填充。

提示消息可以本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 要设置半透明提示消息,其中Arial字体为12px,距主视图底部50像素偏移,填充以及四舍五入的边框:

.s7mixedmediaviewer .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); 
}

在此页面上