La vista principal consiste en la imagen estática y la imagen ampliada mostrada en la vista flotante sobre 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
CSS, propiedad |
Descripción |
---|---|
background-color |
Color de fondo de la vista principal. |
Ejemplo: para que la vista principal sea transparente:
.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, la apariencia y el desplazamiento vertical de la fuente mediante CSS. Sin embargo, la alineación horizontal la gestiona la lógica del visor. Sobrescribir mediante CSS usando left
o right
no se admiten propiedades de .
CSS, propiedad |
Descripción |
---|---|
parte inferior |
Desplazamiento desde la parte inferior de la vista principal. |
color |
Color de 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 |
La opacidad del fondo del texto del mensaje. Para Internet Explorer 8, utilice filtro:alfa(opacity-...) |
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® de 12 píxeles y blanco, 50 píxeles de desplazamiento desde la parte inferior de la vista principal, el relleno y un 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);
}