Vista de zoom flotante flyout-zoom-view

La vista principal consta de la imagen estática y la imagen ampliada que se muestra en la vista flotante encima de la imagen estática. También consiste en el mensaje de sugerencia que se muestra sobre la imagen estática.

Propiedades CSS de la vista principal

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

.s7flyoutviewer .s7flyoutzoomview
Propiedad CSS
Descripción
color de fondo
Color de fondo de la vista principal.

Ejemplo: para hacer transparente la vista principal:

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

Propiedades CSS del mensaje de sugerencia

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

Propiedad CSS
Descripción
inferior
Desplazamiento desde la parte inferior de la vista principal.
color
Color del texto.
font-family
Nombre de la fuente.
tamaño de fuente
Tamaño de fuente.
relleno
Relleno alrededor del texto del mensaje.
color de fondo
Color de relleno de fondo del texto del mensaje.
borde-radio
Radio del borde de fondo del texto del mensaje.
opacidad

Opacidad de fondo del texto del mensaje.

Para Internet Explorer 8, use filter:alpha(opacity-...) )

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

.

Ejemplo: para configurar un mensaje de sugerencia semitransparente con una fuente Arial® blanca de 12 píxeles, un desplazamiento de 50 píxeles desde la parte inferior de la vista principal, relleno y borde redondeado:

.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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8