informacion i shkurtër

Versione të CSS

Vlerat

url Shtegu për tek skedari grafik, i cili specifikohet brenda konstruksionit url (), përdoret si vlerë. Në këtë rast, rruga për tek skedari mund të shkruhet ose në thonjëza (dy ose dy), ose pa to. asnjë Anulon imazhin e sfondit për elementin. trashëgoni Trashëgon vlerën nga prindi.

HTML5 CSS2.1 IE Cr Op Sa Fx

Modeli i objektit

dokument.getElementById ("elementID") .style.backgroundImage

Shfletuesit

Internet Explorer 7.0 ose më vonë zbaton një sfond në brendësi të kufirit të një elementi që ka caktuar vetinë e tij Layout. Nëse elementi nuk ka një Layout, prona e imazhit të sfondit do të respektojë kufijtë e elementit siç specifikohet në specifikim. Diferenca në ekran do të vërehet nëse kufijtë janë të prishur ose të pikëzuar në vend se të fortë.

Nëse elementi është vendosur të lëvizë ose automatikisht, Internet Explorer 8 do të ketë një vonesë vertikale me një pixel kur sfondi të lëvizë.

Internet Explorer 7.0 ose më i ri nuk e mbështet vlerën e trashëguar.

Nëse sfondi është vendosur për një rresht tryeze (etiketë ), atëherë Chrome, Safari, iOS nuk e shfaqin siç përcaktohet nga specifikimi, përkatësisht për secilën qelizë veç e veç. Ndërsa shfletuesi duhet të tregojë një sfond të fortë për të gjithë rreshtin. Shembulli 2 tregon një kod që demonstron gabimin.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Rezultati i këtij shembulli në shfletuesin Chrome është treguar në Fig. 1. Shfletuesi Internet Explorer, Opera dhe Firefox shfaqin saktë sfondin e linjës (Fig. 2).

Figura: 1. Përsëritja e sfondit për secilën qelizë

Figura: 2. Sfondi për të gjithë linjën

Unë mendoj se nuk ka një sit të vetëm ku prona nuk përdoret Sfondi i CSS... Do të duket se çfarë mund të jetë më e thjeshtë se kjo pronë? Por jo, aftësitë e tij janë shumë më të gjera se qëllimi i zakonshëm i një fotoje ose ngjyre si sfondi i një faqeje. Diçka do të jetë e njohur, por diçka me siguri do të bëhet një risi për shumë njerëz. Në çdo rast, do të jetë e dobishme të dimë plotësisht se si funksionon sfondi.

CSS3 ka sjellë shumë gjëra të reja në pronë, kjo është transparenca dhe caktimi i imazheve të shumta si sfond, por ne do të flasim për këtë më poshtë, dhe së pari le të shohim bazat e pronës. sfond.

ngjyrë e sfondit

Jam shumë i sigurt që keni bërë detyra të ngjyrave të sfondit disa herë. Kjo mund të bëhet duke përdorur disa lloje të shënimeve: i rregullt (përdoret emri i ngjyrës), shënimi heksadecimal ose RGB. Secili lloj është i barabartë, përdorni cilindo që ju pëlqen më shumë. Mundohem të përdor versionin më të shkurtër, dhe për perceptimin është më i thjeshtë dhe skedari i stilit është pak më i vogël në madhësi.

P (ngjyra e sfondit: e kuqe;) p (ngjyra e sfondit: # f00;) p (ngjyra e sfondit: # ff0000;) p (ngjyra e sfondit: rgb (255, 0, 0;))

CSS3 ka mbështetje për transparencën, kështu që mund ta shtoni në ngjyrën tonë, si kjo:

P (ngjyra e sfondit: rgba (255, 0, 0, 0,5);)

Shifra e fundit u vendos në 50% transparencë. Mund të vendosni vlerën e transparencës nga 0 (sfond plotësisht transparent) në 1 (plotësisht i errët).

sfond-imazh

Kjo pronë përdoret gjithashtu shumë shpesh, ju lejon të caktoni një imazh në sfond. CSS3 shton aftësinë për të caktuar shumë imazhe në sfond, dhe secila krijon një lloj shtrese, kështu që secila pasuese mbivendoset mbi atë të mëparshme. Pse mund të jetë e dobishme kjo? Gjithçka është mjaft e thjeshtë - le të themi se duhet të mbërthesh gjërat e vogla në secilin cep të faqes. Sigurimi i një paraqitjeje pak a shumë të lëngshme, përdorimi i një imazhi nuk është një opsion. Prandaj, ne bëjmë 4 "shtresa", zhvendosim secilën imazh në cepin e vet dhe kaq, problemi është zgjidhur

Trupi (sfond-imazh: url ("image1"), url ("image2"), url ("image3"))

Nëse keni nevojë të caktoni një imazh në sfond, ne e lëmë vetëm të parën në kod, mendoj se kjo është e kuptueshme.
Kur përdorni ndonjë imazh si sfond, duhen mbajtur parasysh dy rregulla:

• vendosni një ngjyrë sfondi të kundërta në rast se përdoruesi nuk mund të shfaqë një fotografi për ndonjë arsye. Mund të çaktivizojë shfaqjen e imazheve, kursen trafik.
• mos përdorni një imazh sfondi për të përcjellë ndonjë informacion të rëndësishëm. Për arsyen e thënë më sipër, përdoruesi mund të mos e shohë atë.

Mbështetja për imazhe të shumta në sfond është mjaft e gjerë. Të gjithë shfletuesit, madje edhe IE8, e mbështesin këtë pronë.

imazhi i sfondit: | asnje; imazhi i sfondit: | asnjë | trashëgoj; imazhi i sfondit: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | asnje

Përshkrim

Pronë e imazhit në sfond (nga anglishtja "imazhi i sfondit" - "imazhi i sfondit") vendos imazhin e sfondit të një elementi.

shënim

Kur vendosni një imazh sfondi, duhet të specifikoni gjithashtu ngjyrën e sfondit që do të përdoret nëse imazhi nuk është i disponueshëm. Kur një imazh është i disponueshëm, ai shfaqet mbi ngjyrën e sfondit. (Në këtë mënyrë, ngjyra do të jetë e dukshme në pjesët transparente të figurës).

Kushtet e Përdorimit

Duke filluar me CSS3 (të ndara me presje), mund të specifikoni shumë imazhe në sfond në të njëjtën kohë. Kjo do t'i bëjë imazhet e sfondit të poshtëm të dukshme përmes zonave transparente të imazheve të sipërme të sfondit.

JavaScript

[objekt]. stil .backgroundImage \u003d "[vlera]";

Mbështetja e shfletuesit

Specifikim

Vlerat

Të gjitha vlerat CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

Asnjë Nuk tregon asnjë imazh sfondi. url ( ) Specifikon vargun e imazhit URI brenda "url (...)".

sfond-imazh: url (myImage.png);

Url (" ") Specifikon një varg imazhi URI brenda" url (...) ", dhe vargu URI shënohet me karaktere" "DYFISHT QUOTE.

sfond-imazh: url ("myImage.png");

Trashëgimi Tregon që elementi duhet të trashëgojë parametrat e elementit mëmë.

Vlera fillestare: "Asnje".

Shembull i përdorimit

Listimi i kodeve

Imazhi i sfondit

Dokument me imazhe të shumta në sfond.

> Pronë e imazhit në sfond>

Krijimi i faqes në internet fillon me një sfond.

Do të jetë e saktë të regjistroni ngjyrën e sfondit - vetinë ngjyrë e sfondit, për një rrjet sigurie, nëse fotografia nuk ngarkohet. Ne kllapa url () specifikoni rrugën për në dosje me fotografi.

Si parazgjedhje, imazhi do të përsëritet si një "pllakë" derisa të mbush të gjithë ekranin e shfletuesit, ndërsa lëvizim poshtë faqes, "pllaka" jonë do të mbushë edhe ekranin e dytë dhe të tretin, për sa kohë që përmbajtja e faqes ka mbaruar. Shtë e qartë se një rezultat i tillë nuk është lartësia e mendimit të dizajnit dhe ne nuk do të kemi një "banjë", por vetëm një blog, ku lexueshmëria është një pikë shumë e rëndësishme.

Një opsion i thjeshtë për të hequr qafe "tjegullimin" është përdorimi i një imazhi të madh, të paktën 1024 px të gjerë, në mënyrë që të mbushë të gjithë ekranin. Do të jetë gjithashtu një zgjidhje e mirë për të gjetur një strukturë të përsosur, kur shumëzohet, fotografia do të jetë si një e tërë.

Si ta bëni sfondin më tërheqës?

Falënderoj Zotin që kemi ndihmëtarë për këtë:

• jo-përsëritje - çaktivizo përsëritjen
• përsëris-x - përsëritja e modelit vetëm horizontalisht
• përsëris-y - përsëritja e modelit vetëm vertikalisht

Për shembull:

Titulli i blogut

Kjo është një strukturë sfondi që përsëritet vetëm horizontalisht.

Ndihmësi tjetër është prona sfond-pozicion, ju lejon të poziciononi imazhin e sfondit kudo në ekran. Kjo teknikë është e përhapur në krijimin e faqeve moderne. Ne kemi një fotografi, por nuk është pjesë e përmbajtjes, por shërben vetëm si zbukurim për sitin.

Titulli

Një shembull i një sfondi që nuk përsëritet me një pozicionim të dhënë.

Fotografia shfaqet vetëm një herë dhe ndodhet në të djathtë.

Prerja nga buza e djathtë është vendosur në 200 px në mënyrë që të shmanget përplasja e tekstit me sfondin.

Nëse duam që fotografia të jetë gjithmonë e dukshme kur lëviz në ekran, duhet të shtojmë pronën në kodin e mësipërm - bashkëngjitja e sfondit: fikse;

Cili është ndryshimi midis img dhe sfond-imazh?

Dallimi është thelbësor img futet direkt në trup Html-faqet dhe është përgjegjës për përmbajtjen (ilustrime, fotografi, avatar), mbart një ngarkesë semantike. Veryshtë shumë e rëndësishme që imazhi të indeksohet nga motorët e kërkimit dhe të futet në rezultatet e kërkimit. Vetitë Imazhi i sfondit të CSS - e bëjnë sitin unik dhe të bukur, domethënë këtë dizajn, i cili duhet të merret në një skedar të jashtëm CSS stilet ose përdorimi brenda një elementi stil.

Sigurisht, kjo nuk do të thotë se sfond-imazh nuk do të funksionojë nëse vendoset në trup Html-faqet. Por unë fuqimisht rekomandoj që gjithçka që lidhet me dizajnin të merret në konsideratë CSS... Si rezultat, ne kemi një pastrim Html-Kodi:

• kjo do të ketë një efekt pozitiv në indeksimin e faqes; botët e kërkimit do ta duan faqen tuaj dhe do ta vizitojnë atë më shpesh.
• vizitorët tuaj gjithashtu do të jenë të kënaqur, faqja do të ngarkohet më shpejt për shkak të peshës së saj të ulët.
• ju, si një webmaster, e keni më të lehtë të punoni me kod të pastër.

Epo, ne kemi konsideruar pak a shumë të gjitha opsionet duke përdorur pronën Imazhi i sfondit të CSS... Më shumë miq praktikë! Mos ngurroni të kopjoni kodin dhe të gjeni opsionet tuaja!