弹出缩放视图 flyout-zoom-view
主视图由静态图像和弹出视图中显示的缩放图像组成。 此外，它还包括显示在静态图像上的高亮导航区域，以及显示在静态图像顶部的提示消息。
如果正在查看的图像的尺寸与弹出缩放视图的尺寸不匹配，则图像内容将居中在弹出缩放视图的矩形显示区域中。
主视图的 CSS属性
主视图的外观由以下CSS类选择器控制：
.s7flyoutviewer .s7flyoutzoomview
示例 — 使主视图透明：
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
弹出视图的 CSS属性
弹出视图的外观由以下CSS类选择器控制：
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
示例 — 将弹出视图设置为600 x 400像素，在上一个示例中显示的512 x 288主视图右侧偏移了100像素：
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
left: 612px;
top: 0px;
width: 600px;
height: 400px;
}
主视图中高亮显示的 CSS属性
使用以下CSS类选择器控制主视图中高亮显示的外观：
.s7flyoutviewer .s7flyoutzoomview .s7highlight
可以使用CSS控制背景、边框、透明度和类似属性。 但是，高亮DOM元素的大小和位置由查看器逻辑管理。 不支持通过CSS覆盖它。
突出显示不透明度。
对于Internet Explorer 8，使用筛选器：alpha（不透明度 — ...） )；
示例 — 要设置透明度为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属性包括：
input属性选择器，该选择器可用于为不同的设备应用不同的游标图稿和大小。 特别是，input="mouse"对应于桌面系统，input="touch"对应于触摸设备。覆盖的 CSS属性
当overlay参数设置为1时，高亮框架或光标图像周围的区域由CSS类选择器控制：
.s7flyoutviewer .s7flyoutzoomview
.s7overlay
提示消息的 CSS属性
使用以下CSS类选择器来控制提示消息的外观：
.s7flyoutviewer .s7flyoutzoomview .s7tip
可以通过CSS配置字体样式、大小、外观和垂直偏移。 但是，水平对齐是由查看器逻辑管理的。 不支持使用left或right属性通过CSS覆盖它。
消息文本的背景不透明度。
对于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);
}