Visualização de zoom de menu suspenso

A exibição principal consiste na imagem estática, na imagem com zoom mostrada na exibição de flyout na parte superior da imagem estática e na mensagem de dica mostrada na parte superior da imagem estática.

Propriedades CSS da exibição principal

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

.s7flyoutviewer .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:

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

Propriedades CSS da mensagem de dica

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

.s7flyoutviewer .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.

Propriedade CSS

Descrição

bottom

Deslocamento na parte inferior da exibição principal.

color

Cor do texto.

família de fontes

Nome da fonte.

tamanho da fonte

Tamanho da fonte.

preenchimento

Preenchimento em torno do texto da mensagem.

cor do fundo

Cor de preenchimento do plano de fundo do texto da mensagem.

border-radius

Raio da borda do plano de fundo do texto da mensagem.

opacidade

Opacidade do texto da mensagem em segundo plano.

Para o Internet Explorer 8, use filter:alpha(opacity-...) )

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 deslocados da parte inferior da exibição principal, preenchimento e uma borda arredondada:

.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); 
}

Nesta página