Ako vytvoriť efekty popisovania obrázkov CSS?
1. HTML značky :
- Pridajte prvok obrázka (`
2. Štýl CSS :
- Upravte obrázok pomocou vhodných rozmerov a akýchkoľvek požadovaných efektov.
- Upravte štýl textu titulku pomocou selektora `figcaption`.
3. Umiestnenie titulkov :
- Použite vlastnosť `position` na umiestnenie titulku vzhľadom na obrázok. Bežné možnosti zahŕňajú „absolútne“, „relatívne“ a „statické“.
- Upravte vlastnosti `top`, `right`, `bottom` a `left`, aby ste ovládali polohu titulku.
4. Vzhľad titulkov :
- Použite vlastnosti `background-color`, `color`, `padding` a `margin` na ovládanie pozadia, farby textu, medzier a odsadenia.
5. Zarovnanie textu :
- Použite vlastnosť `text-align` na zarovnanie textu titulku na stred, doľava alebo doprava.
6. Efekty po umiestnení kurzora myši (voliteľné) :
- Pridajte k obrázku alebo titulku efekty vznášania pomocou pseudotriedy `:hover` na zlepšenie interakcie používateľa.
7. Media Queries (voliteľné) :
- Pomocou mediálnych dopytov upravte štýl titulkov pre rôzne veľkosti obrazovky.
Tu je príklad útržku kódu CSS:
```css
.image-container {
poloha:relatívna;
šírka:300px;
}
.image-container img {
šírka:100 %;
}
.image-container figcaption {
pozícia:absolútna;
spodná časť:0;
vľavo:0;
šírka:100 %;
farba pozadia:rgba(0, 0, 0, 0,5);
farba:#fff;
výplň:10px;
text-align:center;
}
@media (max-width:600px) {
.image-container figcaption {
veľkosť písma:0,8rem;
}
}
```
V tomto príklade je titulok umiestnený úplne vľavo dole v kontajneri obrázka s polopriehľadným čiernym pozadím a bielym textom. Štýly sú tiež upravené pre menšie obrazovky pomocou mediálneho dotazu.
Experimentujte s rôznymi možnosťami štýlu, aby ste vytvorili jedinečné a vizuálne príťažlivé efekty titulkov obrázkov.
`) a prvok titulku (`
Najnovšie články
- Ako natrvalo odstrániť účet PicsArt
- Ako Stream HDMI USB
- Vedenie techniky – články s návodmi, návody na nákup miniaplikácií, zoznamy technológií
- Ako upraviť alebo zmeniť príbeh Snapchat po odoslaní
- Sony PVM - 20L5 nedá zapnúť
- Tlačidlo štart nie je k dispozícii na mojom notebooku Compaq
- Ako získať prístup Chránené úložisko súborov na mojom počítači
- Ako aktivovať Bluetooth na Asus