在内联缩放模式下,主视图由静态图像组成。 它还包含静态图像上弹出视图中显示的缩放图像,以及静态图像顶部显示的提示消息。
主查看器区域的CSS属性
主视图的外观通过以下CSS类选择器进行控制:
.s7mixedmediaviewer .s7flyoutzoomview
CSS属性 |
说明 |
---|---|
背景颜色 |
主视图的背景颜色。 |
示例 — 使主视图透明:
.s7mixedmediaviewer .s7flyoutzoomview {
background-color: transparent;
}
使用以下CSS类选择器控制提示消息的外观:
.s7mixedmediaviewer .s7flyoutzoomview .s7tip
可以通过CSS配置字体样式、大小外观和垂直偏移。 但是,水平对齐由查看器逻辑管理。 使用通过CSS覆盖它 left
或 right
不支持属性。
提示消息的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);
}