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