Utfällbar zoomvy
Skapat för:
- Utvecklare
- Användare
Huvudvyn består av den statiska bilden och den zoomade bilden som visas i den utfällbara vyn ovanpå den statiska bilden. Det består också av det tips som visas ovanpå den statiska bilden.
CSS-egenskaper för huvudvyn
Utseendet på huvudvyn styrs med följande CSS-klassväljare:
.s7flyoutviewer .s7flyoutzoomview
| CSS-egenskap | Beskrivning |
|---|---|
| background-color | Huvudvyns bakgrundsfärg. |
Exempel - för att göra huvudvyn genomskinlig:
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
CSS-egenskaper för tipsmeddelandet
Utseendet på tipsmeddelandet styrs av följande CSS-klassväljare:
.s7flyoutviewer .s7flyoutzoomview .s7tip
Det går att konfigurera teckensnittsstil, storlek, utseende och lodrät förskjutning via CSS. Den vågräta justeringen hanteras emellertid av visningsprogrammets logik. Det går inte att åsidosätta den via CSS med egenskaperna left eller right.
| CSS-egenskap | Beskrivning |
|---|---|
| nederkant | Förskjutning längst ned i huvudvyn. |
| färg | Textfärg. |
| font-family | Typsnittsnamn. |
| font-size | Teckenstorlek. |
| utfyllnad | Utfyllnad runt meddelandetexten. |
| background-color | Bakgrundsfyllningsfärg för meddelandetext. |
| border-radius | Meddelandetextens bakgrundskantradie. |
| opacitet |
Meddelandetextens bakgrundsopacitet. Använd filter:alpha(opacity-..) för Internet Explorer 8. |
Tipsmeddelandet kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.
.
Exempel - Om du vill ställa in ett halvgenomskinligt tips med vitt Arial® 12-px-teckensnitt, förskjuts 50 pixlar från huvudvyns nederkant, utfyllnad och en rundad kant:
.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);
}