Visualização de zoom de menu suspenso

A exibição principal consiste na imagem estática e na imagem com zoom mostrada na exibição de flyout na parte superior da imagem estática. Também consiste 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, o tamanho, a aparência e o deslocamento vertical da fonte 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 do .

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.

No Internet Explorer 8, use filtro: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® de 12 px, 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