E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Diverse (6)

Lucrul cu imaginile de fundal in HTML.

08.05.2008
Lucrul cu imaginile de fundal in HTML.

Introducere in lucrul cu imaginile de background in HTML

Total vizualizari: 5046 5046 afisari   |   Comentarii  0   |   Rating   |   (0 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Hanphilibin.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Majoritatea utilizatorilor care acceseaza o pagina de pe site-ul tau nu vor putea printa logo-urile pentru ca imaginile de fundal nu sunt afsate de obicei. Tehnica rapida si simpla care vei face ca imaginea sa apara la imprimare este:

HTML:

<h1 id="logo">Site Name</h1>

CSS:

h1#logo { 
    background: url(images/logo.gif); 
    height: 75px; 
    width: 137px; 
    text-indent: -9999px; 
}

Aceasta se va vedea bine intr-un layout normal, dar logo-ul va disparea cand pagina este printata. Pentru a rezolva aceasta problema, trebuie sa punem imaginea pe pagina cu HTML si sa folosim stylesheet-uri screen si print.

HTML:

<h1 id="logo">Site Name</h1>
<img src="images/logo.gif" alt="Site Name" class="nodisplay" />

Screen CSS:

h1#logo { 
    background: url(images/logo.gif); 
    height: 75px; 
    width: 137px; 
    text-indent: -9999px; 
}
img.nodisplay { display: none; }

Print CSS:

h1#logo { display: none; }
img.nodisplay { display: block; }

Tocmai am ascuns imaginea pentru cititoarele de ecran si am substituit-o cu o imagine "reala" pentru logo-ul de fundal pentru imprimare. Poti sa faci asta pentru fiecare imagine de fundal care vrei sa apara la imprimare de pe pagina, desi nu este foarte eficient pentru fundaluri cu gradient si sabloane.

Pagina:
1
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(0 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5040
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4995
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4840
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4815
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4615
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Fotografie Bridge PSD Gimp Dreamweaver RoR XHTML Flash HTML SWF Verilog JSON Lightroom COREL DRAW SEO Fireworks XML AJAX Excel Javascript CSS Illustrator Java Action Script Outlook Sony Vegas Swift 3D Word Ruby on Rails Photoshop StyleSheet PHP Powerpoint MySQL Python Vista
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software