Vista de zoom flotante flyout-zoom-view

En el modo de zoom en línea, la vista principal consiste en la imagen estática. También consta de 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
Propiedad CSS
Descripción
background-color
Color de fondo de la vista principal.

Ejemplo: para hacer transparente la vista principal:

.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 tamaño, el aspecto y el desplazamiento vertical 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.

Propiedades CSS del mensaje de sugerencia

Propiedad CSS
Descripción
background-color
Color de relleno de fondo del mensaje.
border-radius
Radio de borde de fondo del mensaje.
parte inferior
Desplazamiento desde la parte inferior de la vista principal.
color
Color del texto de información.
font-size
Tamaño de fuente.
font-family
Familia de fuentes.
opacidad
Opacidad de 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, un desplazamiento de 50 píxeles desde la parte inferior de la vista principal, relleno y 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8