Exibição de Zoom do Flyout

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

Propriedades CSS da área principal do visualizador

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

.s7mixedmediaviewer .s7flyoutzoomview

Propriedade CSS

Descrição

cor do fundo

A cor de plano de fundo da exibição 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 substituí-lo por meio de CSS usando propriedades left ou right.

Propriedades CSS da mensagem de dica

Propriedade CSS

Descrição

cor do fundo

Cor de preenchimento do plano de fundo da mensagem.

border-radius

Raio da borda do fundo da mensagem.

bottom

Deslocamento na parte inferior da exibição principal.

color

Cor do texto da dica.

tamanho da fonte

Tamanho da fonte.

família de fontes

Família de fontes.

opacidade

Opacidade do plano de fundo da mensagem.

preenchimento

Preenchimento em torno 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 ponta semitransparente com fonte branca Arial 12px, 50 pixels são deslocados a partir da parte inferior da exibição principal, no preenchimento e em 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); 
}

Nesta página