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