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: 4886 4886 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
4320
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4190
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4170
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4010
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Verilog JSON PHP Photoshop Gimp Sony Vegas Dreamweaver Excel RoR XHTML Swift 3D Vista Flash Javascript Powerpoint StyleSheet Outlook HTML AJAX MySQL Fotografie Word COREL DRAW SEO Python XML Ruby on Rails SWF Bridge Lightroom Illustrator PSD Action Script Java CSS Fireworks
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