CSS preklapanje: kako napisati tekst na slici. Slike u tekstu Prikaži opis kada pređete mišem preko slike

Na web stranici postoje tri slike igraćih karata (slika 3.51). Sve dok su jedna pored druge, njihov redosled nije bitan, ali ako primenite pozicioniranje na njih i pomerite slike tako da se preklapaju, jedna kartica će biti viša od druge (slika 3.52).

Rice. 3.51. Karte jedna pored druge

Rice. 3.52. Karte jedna na drugu

Ako zamislite web stranicu u obliku trodimenzionalnog prostora (sl. 3.53), možete vidjeti da su i karte smještene duž ose Z. Vrijednosti duž ove ose određuju koja je kartica bliža nas, što je dalje, drugim rečima, redosledom kojim se oni nalažu jedno drugom. U kodu dokumenta (Primjer 3.38) redoslijed se određuje automatski na osnovu toka dokumenta. Što je niži element u kodu, to je viši duž Z ose, pa se slika sa asom, kao donjom, nalazi na vrhu ostalih karata.

Rice. 3.53. Imaginarne koordinate web stranice

Primjer 3.38. Normalan redosled kartica

U CSS-u, položaj Z-ose kontrolira svojstvo z-indeks, koje određuje da li nam je element „bliži“ ili „dalje“. Kao vrijednost uzima se cijeli broj; što je veći, to se element više nalazi u odnosu na ostale. Elementima se automatski dodjeljuje vrijednost 0, tako da će čak i z-indeks od 1 uzrokovati da se element preklapa sa svim osnovnim elementima. Modificirajmo primjer 3.38 tako da redoslijed kartica bude obrnut, i to samo uređivanjem stila, ostavljajući HTML kod isti.

IMG kartice (pozicija: relativna; ) .tri (gore: 50px; lijevo: 55px; z-indeks: 5; ) .sedam (lijevo: -120px; gore: 25px; z-indeks: 2; ) .kec (lijevo: -295px; z-indeks: 1; )

Svojstvo z-indeksa za klasu tri je posebno postavljeno na 5 kako bi se pokazalo da redoslijed vrijednosti z-indeksa nije bitan. Glavna stvar je da je jedan broj veći od drugog.

Svojstvo z-index radi samo za elemente čija je vrijednost pozicije apsolutna, fiksna ili relativna.

Kada želite da postavite element iznad svega ostalog na stranici, daje mu se vrlo visoka vrijednost z-indeksa, kao što je 9999. Ovo osigurava da čak i ako stilovi koriste z-indeks, on će biti manji od naveden jedan. U primjeru 3.39, kada pređete mišem preko mapa, z-indeks se mijenja na 10. Ovdje nisu potrebne skripte, sve se radi preko :hover pseudo-klase.

Primjer 3.39. Promjena z-indeksa kada lebdite iznad karte

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

HTML oznake koje određuju poravnavanje i uvlačenje teksta

Opravdani tekst korišten u tipografiji

Primjer ispod pokazuje kako se poravnati tekst u širinu stranice:

poravnati = "lijevo"	align="desno"
	Svakim danom raste broj radnika zaposlenih u uslužnom sektoru i širenju informacija. Ako su simboli prošlih vekova bili farma i fabrika, onda je simbol sadašnjeg 21. veka kancelarija opremljena kompjuterima koji imaju pristup protoku informacija.
align="justify"	align="centar"
Svakim danom raste broj radnika zaposlenih u uslužnom sektoru i širenju informacija. Ako su simboli prošlih vekova bili farma i fabrika, onda je simbol sadašnjeg 21. veka kancelarija opremljena kompjuterima koji imaju pristup protoku informacija.	Svakim danom raste broj radnika zaposlenih u uslužnom sektoru i širenju informacija. Ako su simboli prošlih vekova bili farma i fabrika, onda je simbol sadašnjeg 21. veka kancelarija opremljena kompjuterima koji imaju pristup protoku informacija.

Vrijednost justify osigurava uniformnost poravnajte tekst desno i lijevo, to je u širini. Ova metoda se široko koristi u štampi.

Poravnavanje teksta u HTML-u prema sredini i širini

Poravnajte tekst u HTML-u centrirano, tekst udesno:

rezultat:

Atributi i vrijednosti

• align="left" - definira lijevo poravnanje teksta(podrazumevano).
• align="centar" - poravna tekst prema sredini.
• align="desno" - poravna tekst udesno.

Poravnaj | HTML uvlačenje teksta

HTML tekst i njegovo uvlačenje na lijevoj strani stranice

Mi ćemo proizvoditi uvlačenje teksta lijevo na dva načina:

rezultat:

Pogledaj u novom prozoru.

Često vidim u komentarima lekcija ili na forumima kada početnici pitaju: „Želim da objavim tekst preko slike, a ispostavilo se da je ispod ili iznad slike. Pomozite." Pogledajmo konkretan primjer kako pisati tekst na slici bilo gdje.

Moramo da potpišemo njegovo ime pored svakog povrća na ilustraciji ispod. Zadatak izgleda jednostavan, ali vjerujte mi, može izluditi svakog webmastera početnika.

Namjerno sam uzeo veliku sliku od 1280x733 kao primjer kako bih pokazao kako je prilagoditi različitim rezolucijama ekrana. Prošla su vremena kada je bilo dovoljno naučiti kako se rasporediti samo za desktop rezolucije. Prilikom izrade rasporeda treba odmah voditi računa o prilagodljivosti.

HTML markup

Prije svega, kreiramo kontejner za sliku povrća i za natpise. Napominjemo da svaki natpis stavljamo u poseban blok s različitim klasama. I to je logično, jer će svi natpisi imati svoje koordinate na stranici, a mi ćemo njima upravljati pisanjem svojstava u div.

Nakon završenog HTML- markup, vidimo samo fragment slike i tekst koji se pojavljuje ispod slike. Poznata slika, zar ne?

Slika se proširila na sve svoje prilično velike piksele i pojavila se horizontalna traka za pomicanje, ali to je, srećom, lako popraviti postavljanjem širine slike na 100%, čime je postala prilagodljiva. Najmanje jedan problem je riješen.

Img (
širina: 100%;
}

Sada pređimo na tekst.

CSS stilovi

U stilovima kontejnera, ključno svojstvo će biti pozicija: relativna. Ovim mijenjamo pravila i tražimo da se koordinate broje ne iz gornjeg lijevog ugla prozora pretraživača, već iz ugla kontejnera, koji je roditelj svih elemenata u njemu ugniježđenih i zauzima 90% prozora.

Kontejner (
širina: 90%;
pozicija: relativna;
text-align: centar;
boja: #000;
font-family: arial black;
veličina fonta: 250%;
}

Lijevo(
pozicija: apsolutna;
vrh: 26%;
lijevo: 6%;
}

Centar (
pozicija: apsolutna;
vrh: 17%;
lijevo: 42%;
}

tačno (
pozicija: apsolutna;
vrh: 1%;
desno: 27%;
}

Koordinate postavljamo ne u pikselima, već u %, ne slučajno; kada se smanji veličina ekrana, tekst će ostati na istom mjestu gdje smo ga popravili. Ovo je dobra vijest, ali loša vijest je da se veličina teksta ne smanjuje zajedno sa slikom. Sama slika je smanjena, ali se tekst mora nasilno smanjiti.

Medijski upiti

U rezoluciji jednakoj ili manjoj od 768 piksela, smanjite veličinu fonta na 150%. Kako smo znali da trebamo smanjiti na 768 piksela? Kroz kod inspektora smo vidjeli u kojem trenutku tekst skače na susjedne elemente.

Neki ljudi pronađu pogrešan izlaz: nacrtaju tekst na slici u grafičkim uređivačima, a zatim sliku s tekstom stave u html dokumente. Ali šta ako je potrebno zamijeniti tekst? Ponovo nacrtati sliku? Postoje jednostavnija rješenja.

Kao rezultat dobijamo:

Sve je bilo prekriveno bijelim snijegom: i drveće i kuće, vjetar laganog krila je zviždao: "Zdravo, zima-zimo!"

Suština predstavljene metode je da napravimo div kontejner koji će sadržavati sliku i tekst. U ovom slučaju, tekst ćemo pozicionirati u odnosu na donji lijevi ugao kontejnera.

HTML kod:

css kod:

.container ( display:inline-block; position:relative; ) .container div (display: inline-block; position: absolute; bottom: 10px; lijevo: 0px; background-color: rgba(0,0,0,.4 ); padding: 5px 5px 5px 10px; boja: bijela )

• display: inline-block - potreban nam je kontejner da se ne proteže po širini cijele stranice.
• pozicija: relativna - prisiljava sve ugniježđene blokove s položajem: apsolutna da broje koordinate njihove pozicije ne iz prozora pretraživača, već iz block.container

• display: inline-block - tako da se stilovi koji se odnose na blok elemente mogu primijeniti na naš tekst.
• pozicija: apsolutna - postaviti blok koristeći određene koordinate: donje, lijevo - donje i lijeve uvlake (koordinate) moguće je koristiti gornje i desno umjesto njih

Prikaži opis kada pređete mišem preko slike

Metoda prikazana iznad može se koristiti za prikaz teksta kada pređete mišem preko slike (može biti korisno za opisivanje proizvoda u online prodavnici).

Svakog dana na html forumima, početnici pitaju: "Kako staviti tekst na sliku?" Neki ljudi pronađu pogrešan izlaz: nacrtaju tekst na slici u grafičkim uređivačima, a zatim sliku s tekstom stave u html dokumente. Ali šta ako je potrebno zamijeniti tekst? Ponovo nacrtati sliku? Postoje jednostavnija rješenja.

Koristeći metode opisane u lekciji, možemo dobiti sljedeći rezultat:

Priprema

Hajde da se slikamo

Njegova veličina je 350px × 200px. I ove informacije su dovoljne za početak.
Pokušajmo sada staviti tekst na njega na nekoliko načina.

Prvi metod: slika kao div pozadina

Odmah ću reći da se meni ni sama ne sviđa ova metoda zbog primitivnog krajnjeg rezultata, ali ipak postoji, pa ću vam reći o tome.

Suština metode je da uzmemo div tag, damo mu dimenzije koje odgovaraju veličini slike i postavimo sliku kao pozadinu.
Imajte na umu da je veličina oznake = izvorna veličina + veličina dopuna. Dakle, ako želimo da uvučemo sadržaj od ivice slike za 20px, tada je potrebno navesti veličinu samog diva da bude 20px manja. To jest: 350-20 = 330 po širini i 200-20 = 180 po visini.

Primjer 1 (
padding-top:20px;
širina:330px;
padding-left:20px;
visina:180px;
background-image:url("/examples/20120821/bg.png");

/*formatiranje teksta*/
boja:#FFF;

font-size:40px;
}

rezultat:

Metoda je jednostavna u strukturi HTML koda (potrebna je samo jedna oznaka), ali vam ne dozvoljava postavljanje posebnih stilova za tekst. Kao rezultat toga, tekst može biti težak za čitanje. Osim toga, blok je striktno vezan za veličinu slike, što znači da će se, ako se slika promijeni, css morati ponovo napisati

Drugi metod: preklapanje dvije oznake jedna na drugu

Suština ove metode je da napravimo div kontejner koji će sadržavati sliku i tekst. U ovom slučaju, tekst ćemo pozicionirati u odnosu na gornji lijevi ugao kontejnera.

Primjer 2 (
display:inline-block;
pozicija:relativna;

}
.example2 raspon (
display:inline-block;
pozicija:apsolutna;
top:30px;
lijevo:0px;

/* Dekoracija teksta */
boja:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;

/* Pozadina */
background-color:rgba(0,0,0,.4);
padding:10px 30px;
}

Primjer 2:
Potreban nam je display:inline-block tako da se kontejner ne proteže po širini cijele stranice.
position:relative prisiljava sve ugniježđene blokove sa position:apsolute da broje koordinate svoje pozicije ne iz prozora pretraživača, već iz block.example2.

Primjer2 raspon:
display:inline-block - tako da se stilovi koji se odnose na blok elemente mogu primijeniti na naš tekst.
position:apsolute - za uklanjanje oznake iz opšteg toka i njeno dalje postavljanje koristeći zadatak specifičnih koordinata. gore, lijevo — gornje i lijeve uvlake (koordinate). umjesto toga moguće je koristiti donji (donji) i desni (desni).

rezultat:

Nedostatak ove metode je što je narušena semantika koda i pojavljuju se mnoge nepotrebne oznake. Ali nije vezan za veličinu slike, omogućava vam da kreirate pozadinu za tekst, čineći ga čitljivijim i općenito nam daje potpunu slobodu u prilagođavanju stilova.

Igranjem sa css i strukturom tagova možete postići sljedeći rezultat:

Ovaj rezultat je prilično dobar za dizajniranje galerija, izloga internetskih trgovina i drugih usluga.

Zadnji kod rezultata: