弹出缩放视图

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

主查看器区域的CSS属性

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

.s7mixedmediaviewer .s7flyoutzoomview

CSS属性

说明

背景颜色

主视图的背景颜色。

示例 — 使主视图透明:

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

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

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

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

提示消息的CSS属性

CSS属性

说明

背景颜色

消息背景填充颜色。

边框半径

消息背景边框半径。

底部

从主视图底部偏移。

color

提示文本颜色。

字体大小

字体大小.

字体系列

字体系列。

不透明度

消息背景不透明度。

填充

在消息文本周围填充。

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

示例 — 要设置半透明的提示消息,其中Arial® 12-px字体为白色,距主视图底部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);
}

在此页面上