Exibição de zoom de imagem suspensa flyout-zoom-view

No modo de zoom em linha, a visualização principal consiste na imagem estática. Também consiste na imagem com zoom mostrada na exibição da imagem estática, e na mensagem de dica mostrada sobre a imagem estática.

Propriedades CSS da área do visualizador principal

A aparência da visualização principal é controlada com o seguinte seletor de classe CSS:

.s7mixedmediaviewer .s7flyoutzoomview
Propriedade CSS
Descrição
cor de fundo
A cor do plano de fundo da janela principal.

Exemplo - para tornar a exibição principal transparente:

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

A aparência da mensagem de dica é controlada com o seguinte seletor de classe CSS:

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

É possível configurar o estilo da fonte, a aparência do tamanho e o deslocamento vertical por meio do CSS. No entanto, o alinhamento horizontal é gerenciado pela lógica do visualizador. Não há suporte para a substituição por CSS usando as propriedades left ou right.

Propriedades CSS da mensagem de dica

Propriedade CSS
Descrição
cor de fundo
Cor de preenchimento do plano de fundo da mensagem.
raio da borda
Raio da borda do fundo da mensagem.
inferior
Deslocamento da parte inferior da exibição principal.
cor
Cor do texto da dica.
tamanho da fonte
Tamanho da fonte.
Família de fontes
Família da fonte.
opacidade
Opacidade do fundo da mensagem.
preenchimento
Preenchimento ao redor do texto da mensagem.

A mensagem de dica pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar uma mensagem de dica semitransparente com fonte Arial® de 12 px branca, 50 pixels de deslocamento em relação à parte inferior da exibição principal, preenchimento e uma borda arredondada:

.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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8