Visualização de zoom do menu suspenso

A visualização principal do modo de zoom em linha consiste na imagem estática, imagem com zoom exibida na visualização flyout sobre a imagem estática e a mensagem de dica mostrada sobre a imagem estática.

Propriedades de CSS da área do visualizador principal

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

.s7mixedmediaviewer .s7flyoutzoomview

Propriedade CSS

Descrição

cor de fundo

A cor de fundo da visualização principal.

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

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

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

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

Propriedades de CSS da mensagem de dica

Propriedade CSS

Descrição

cor de fundo

Cor de preenchimento do plano de fundo da mensagem.

raio da borda

Raio da borda do plano de fundo da mensagem.

bottom

Deslocamento na parte inferior da visualização principal.

cor

Cor do texto da dica.

font-size

Tamanho da fonte.

família de fontes

Família de fontes.

opacidade

Opacidade em segundo plano da mensagem.

revestimento

Preenchimento em torno do texto da mensagem.

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 pixels, o deslocamento de 50 pixels é feito na parte inferior da visualização principal, no preenchimento e em uma borda arredondada:

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

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free