弹出缩放视图

上次更新: 2023-05-26
  • 创建对象:
  • Developer
    User

主视图由静态图像和显示在静态图像顶部的弹出视图中的缩放图像组成。 此外,它还包括显示在静态图像之上的提示消息。

主视图的CSS属性

主视图的外观由以下CSS类选择器控制:

.s7flyoutviewer .s7flyoutzoomview

CSS属性

说明

background-color

主视图的背景颜色。

示例 — 使主视图透明:

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

提示消息的CSS属性

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

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

在此页面上