Visualização de zoom do Flyout

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

Propriedades de CSS da visualização principal

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

.s7flyoutviewer .s7flyoutzoomview

Propriedade CSS

Descrição

cor de fundo

A cor de fundo da visualização principal.

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

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

Propriedades de 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. Entretanto, o alinhamento horizontal é gerenciado pela lógica do visualizador. Não há suporte para substituir por CSS usando as propriedades left ou right.

Propriedade CSS

Descrição

bottom

Deslocamento na parte inferior da visualização principal.

cor

Cor do texto.

família de fontes

Nome da fonte.

font-size

Tamanho da fonte.

revestimento

Preenchimento em torno do texto da mensagem.

cor de fundo

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

raio da borda

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 de elementos da interface do usuário para obter mais informações.

.

Exemplo - para configurar uma mensagem de ponta semitransparente com fonte Arial branca de 12 px, 50 pixels de deslocamento a partir da parte inferior da visualizaçã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