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
background-color
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. Anularlo mediante CSS mediante left o right no se admite esta propiedad.

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

Opacidad de fondo del texto del mensaje.

Para Internet Explorer 8, utilice filtro:alfa(opacidad-...) )

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