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