Vista de zoom flotante

En el modo de zoom en línea, la vista principal consiste en la imagen estática, la imagen ampliada que se muestra en la vista flotante sobre la imagen estática y el mensaje de sugerencia que se muestra sobre la imagen estática.

Propiedades CSS del área del visor principal

El aspecto de la vista principal se controla con el siguiente selector de clase CSS:

.s7mixedmediaviewer .s7flyoutzoomview

CSS, propiedad

Descripción

background-color

Color de fondo de la vista principal.

Ejemplo: para que la vista principal sea transparente:

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

El aspecto del mensaje de sugerencia se controla con el siguiente selector de clase CSS:

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

Es posible configurar el estilo de fuente, el aspecto del tamaño y el desplazamiento vertical mediante CSS. Sin embargo, la alineación horizontal se gestiona mediante la lógica del visor. No se admite su anulación mediante CSS con propiedades left o right.

Propiedades CSS del mensaje de sugerencia

CSS, propiedad

Descripción

background-color

Color de relleno del fondo del mensaje.

border-radius

Radio del borde de fondo del mensaje.

parte inferior

Desvío desde la parte inferior de la vista principal.

color

Color del texto de la sugerencia.

font-size

Tamaño de fuente.

font-family

Familia de fuentes.

opacidad

Opacidad del fondo del mensaje.

relleno

Relleno alrededor del texto del mensaje.

El mensaje de sugerencia se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar un mensaje de punta semitransparente con una fuente Arial blanca de 12 píxeles, 50 píxeles se desplazan de la parte inferior de la vista principal, el relleno y un borde redondeado:

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

En esta 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