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
background-color
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. Substituição por CSS usando left ou right não há suporte para propriedades.

Propriedades CSS da mensagem de dica

Propriedade CSS
Descrição
background-color
Cor de preenchimento do plano de fundo da mensagem.
border-radius
Raio da borda do fundo da mensagem.
bottom
Deslocamento da parte inferior da exibição principal.
cor
Cor do texto da dica.
font-size
Tamanho da fonte.
font-family
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