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