Jak na to - Umístění textu přes obrázek
Naučte se, jak umístit text přes obrázek.
Text obrázku
Vlevo dole
Vlevo nahoře
Vpravo nahoře
Vpravo dole
Na střed
Jak umístit text do obrázku
Krok 1) Přidejte HTML:
Příklad
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow"
style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top
Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
Krok 2) Přidejte CSS:
Příklad
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom
left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position:
absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text
*/
.centered {
position:
absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Chcete-li se dozvědět více o tom, jak upravovat obrázky, přečtěte si náš výukový program Obrázky CSS .
Chcete-li se dozvědět více o umístění CSS, přečtěte si náš výukový program Umístění CSS .