Kuinka tehdä kuvan tausta HTML ja CSS. 3 yksinkertaista tapaa

Asettaa taustasuunnitelman värin ulos paletista. Pyyrin väri on aina sama kuin esivanhemman elementin väri.
Terveisiä. Tässä artikkelissa haluan kertoa kolmesta tapaa sijoittaa kuva koko sivun taustaksi vain HTML + CSS: llä (ilman JS: tä).

Terveisiä. Tässä artikkelissa haluan kertoa kolmesta tapaa sijoittaa kuva koko sivun taustaksi vain HTML + CSS: llä (ilman JS: tä).

Joten taustakuvan vaatimukset Olemme seuraavat:

  • 100% leveys ja sivut korkeus
  • Tausta-asteikot tarvittaessa (tausta venytetään tai puristetaan näytön koosta riippuen)
  • Liitä kuvien (kuvasuhteen) osuudet (kuvasuhde)
  • Kuva, joka keskittyy sivulle
  • Tausta ei aiheuta rullaa
  • Ratkaisu on maksimaalisesti crossbawser
  • Muita teknologioita ei käytetä, paitsi CSS

Asettaa taustasuunnitelman värin ulos paletista. Pyyrin väri on aina sama kuin esivanhemman elementin väri.

Menetelmä 1

Mielestäni tämä on paras tapa, koska se on helpoin, tiivis ja moderni. Se käyttää CSS3-ominaisuutta Taustanumero. jota haemme tunnisteeseen Html . Tarkalleen Html , mutta ei Elin. koska Sen korkeus on suurempi tai yhtä suuri kuin selainikkunan korkeus.

Asenna kiinteä ja keskitetty tausta ja säädä sen koko käyttämällä Tausta-koko: kansi .

Html { 

Taustakuva: URL (kuvat / background.jpg);

Tausta-REPEAT: ei-toisto;

Tausta-asema: Center Center;

Tausta-liite: kiinteä;

-WebKit-tausta-koko: kansi;

-Moz-tausta-koko: kansi;

-O-tausta-koko: kansi;

Tausta-koko: kansi; 
} 

Demo

Tämä menetelmä toimii

  • Chrome (mikä tahansa versio)
  • Ooppera 10+.

Firefox 3.6+

Safari 3+.

Eli 9+

Jotta kuvat ladataan nopeasti, aseta sivustosi vain todistetuista hosting-palveluntarjoajilta, esimerkiksi beget.com 
Käyttäjät ja hakukoneet rakastavat nopeita sivustoja. 

Taustakuva: URL (kuvat / background.jpg);

Menetelmä 2

Tämä menetelmä tarjoaa IMG-elementin käytön, jonka koko vaihtelee selainikkunan koosta riippuen. Jos haluat venyttää kuvan koko näytölle, sen on asetettava min-korkeus ja leveys, jonka arvo on 100%. Ja niin, että kuva ei pakattu pienempään kokoon kuin alkuperäinen, asenna min-leveys kuvan yhtäläisellä leveyden arvolla.

Jos ikkunan leveys on pienempi kuin kuvan leveys, mediakyselyä käytetään keskelle keskelle keskelle.

periä.

<img src = "/ kuvat / background.jpg" class = "tausta" />

img.background { Min-korkeus: 100%; Min-leveys: 640px; Leveys: 100%; Korkeus: auto;

Paikka: kiinteä; Top: 0; Vasen: 0;

/ * Riippuu kuvan koosta * /

@Media-näyttö ja (max-leveys: 640px) { img.bg { и Vasen: 50%; marginaali vasemmalle: -320px; } } } Demo

Perii kaikki vanhempien elementin ominaisuudet

Tämä menetelmä toimii:

Kaikki versiot hyvistä selaimista (kromi, ooppera, firefox, safari) Eli 9+ и Tapa 3. . Toinen tapa on seuraava: Korjaa kuva <img /> sivun vasemmassa yläkulmassa ja venytä se 100%: n min-leveyden ja min-korkeuden ominaisuuksien avulla säilyttäen kuvasuhteen. Totta, tällä lähestymistavalla, kuva ei ole keskitetty. Mutta tämä ongelma ratkaistaan ​​kääritty kuva <Div />, jonka teemme 2 kertaa ikkunan koko. Ja itse, itse venyttää ja laittaa keskustaan. <DIV CLASS = "Tausta"> <img src = "/ kuvat / background.jpg" />

</ Div> Div.background { <DIV CLASS = "Tausta"> Paikka: kiinteä;

Yläosa: -50%;

Vasen: -50%; } Leveys: 200%; Korkeus: 200%; }

img { Asema: Absoluuttinen; Top: 0;

Vasen: 0; Oikea: 0; :

Pohja: 0;

Marginaali: auto; Min-leveys: 50%; Min-korkeus: 50%; } .

Tämä menetelmä toimii hyvissä selaimissa ja eli 8+.

Toivon, että nämä tiedot ovat hyödyllisiä sinulle. Henkilökohtaisesti käytän usein näitä menetelmiä etenkin ensin. Varmasti on muita keinoja asettaa kuva takaisin taustalla CSS: llä. Jos tiedät heistä, jakaa, kiitos. Aseta taustaväri ja / tai kuva sivulle tai erilliselle tuotteelle on tarpeeksi yksinkertainen. Tärkeintä on tietää, missä ja miten se voidaan tehdä, sekä olla värikoodi ja / tai taustakuvaa. On mahdollista, että tästä artikkelista opit paljon uusia asioita, mutta luoin sen nimenomaan aloittelijoille. Siksi kaikki on mahdollisimman lyhyt ja yksityiskohtaisesti samanaikaisesti. Tärkeintä on, että et saa paitsi yleistä esitystä ja valmiita esimerkkejä, mutta myös ymmärrystä, miten tehdä tausta HTML. Aseta tausta HTML: ssä käyttämällä välikymmentä Ja aloitan sen, että HTML5. Sivuston taustalla ei ole mahdollisuutta. Tämä ominaisuus päätettiin kestää CSS: ssä. Siksi, jos aiot käyttää alla, ja haluat saada kelvollisen » (oikea) Koodi, sinun on pysyttävä asiakirjan siirtymätyypillä. Tehdä tämä, verkkosivusi pitäisi aloittaa seuraavalla rivillä: <! DOCTYPE HTML Public "- // W3C // DTD HTML 4.01 » Siirtymäkausi // fi "" http://www.w3.org/tr/html4/loose.dtd ">

Käytännön luokkiin aika

Miten taustalla on web-sivu? (#)Jos tajusit sen, ymmärrämme, miten tausta on luotu. Ja ensimmäinen asia on huomattava - tämä on ero

Taustaväri

Taustakuva

. Alussa menee

Taustaväri Vasen: 50%; jotka tulvat kaikki käytettävissä olevalla sivutilassa tai sen elementillä. Toistuva sen päällä taustakuva }

. Visuaalisesti tämä voidaan kuvata seuraavasti: Asema: Absoluuttinen; Top: 0;

HTML-asiakirjan ja sen elementtien tausta

Taustavalvonnan pääelementtiä ja niiden attribuuttien pääosien jälkeen jatkavat suoraan tietyn esimerkin analyysiin. Alla esitetyssä ohjelmakoodissa yritin ottaa kaikki kuvatut elementit käyttöön.

Toinen asia, mitä sinun tarvitsee tietää, on ero välillä

Asiakirjan runko Oikea: 0; :

Asiakirjan elementti

Asiakirjan runko

Osoitettu Web-sivutunnisteen HTML-koodiin

Elin. joka sisältää kaikki Web-sivun sisällön. On selvää, että asiakirjan asiakirjan tausta ei voi olla avoin. Jos asiakirjan kehon tausta ei ole määritetty, käytetään selausasetuksissa määritettyä oletusarvoa. Sivun elementit ovat tunnisteen sisällä }

. On huomionarvoista, että voit asettaa värin ja / tai taustakuvan HTML: n avulla kaikki asiakirjan elementit. Esimerkiksi taustakuvaa voidaan määrittää vain taulukoihin. Oletuksena heillä on yleensä läpinäkyvä tausta. Asema: Absoluuttinen; Top: 0;

Attribuutti BGColor luoda taustaväri

Jotta voisit kysyä

Asiakirja tai sen elementit käytetään attribuuttia Korkeus: 200%; и taustakuva bgcolor , esimerkiksi: <Body BGColor = "# EC008C">

<! - Asiakirjan elin ->

</ Body>

Tällöin asetamme koko sivun taustavärin kokonaisuutena. Mutta esimerkki siitä, miten asetetaan taustaväri pöydälle, tunnisteessa Pöytä <Taulukko bgcolor = "# ec008c"> <tr> <td> Teksti taustalla </ td> </ tr> </ taulukko>

On huomionarvoista, että taulukon taustaväri voidaan myös määrittää tunnisteen riveille

Tr Ja niiden soluihin tunnisteessa TD.

Kuinka selvittää värikoodi? Olet todennäköisesti jo huomannut, että HTML: n väri on asetettu erityiseen koodi Html , esimerkiksi:

# EC008C.

  • . Jotta voit selvittää koodi, jonka tarvitset väri, voit käyttää jotakin grafiikkan toimittajista. Esimerkiksi Photoshopissa voit käyttää "
  • Eyedropper-työkalu.
  • (Pipetti)

Saada väri kuvan pisteestä. Sitten sinun on napsautettava työkalurivin tuloksena oleva väri ja avautuu ikkuna

Värinvalitsija (Värin valinta) Kopioi värikoodi. Vastin huomionne siihen, että tämä koodi on ilman ristikkomerkkiä Alussa tämä merkki on lisättävä manuaalisesti.

Voit myös käyttää lukuisia online-palveluita esimerkiksi: 
Heidän työn periaate on vielä helpompi - Napsauta haluttua väriä ja hanki se koodi. Attribuutti tausta luoda taustakuva Sekä taustavärin osalta ja jos kyseessä on
Sinun on käytettävä erityistä attribuuttia, nimittäin 
tausta. 
<kehon tausta = "/ 2014/06 / bg.jpg">

В Html Tässä tapauksessa pyydämme taustakuvaa koko sivulta. On huomionarvoista, että kuvan koon rajoitukset johtuvat esimerkiksi toistuvasti: Kuten näet, kun toisto, kuvan välinen siirtyminen on havaittavissa. Siksi käytetään usein erityisiä kuvia, joissa tämä hetki otetaan huomioon. Mutta esimerkki siitä, miten asetetaan taustakuva pöydälle, tunnisteessa

<Taulukko tausta = "/ 2014/06 / bg.jpg"> <tr> <td> Teksti taustalla </ td> </ tr> </ taulukko> Html On huomionarvoista, että taustakuvaa voidaan asettaa vain pöydälle kokonaisuutena ja / tai sen erillisessä solussa. Merkkijono ei toimi. Attribuutti tausta luoda taustakuva .

Absoluuttinen ja suhteellinen polku taustakuviin (Värin valinta) Erikseen kannattaa kiinnittää huomiota Osoite taustakuva . Tällöin käytetään suhteellista polkua kuvaan, ts. Osoite on merkitty kuvatiedoston sijainnissa Web-sivutiedostoon. Tätä vaihtoehtoa ei voida kutsua erityisen onnistuneeksi. On parasta käyttää absoluuttista polkua kuvaan, ts.

Sen koko URL-osoite <Body Background = "/ Images / BG.JPG"> .

Tässä tapauksessa sinulla ei ole samanaikaisia ​​ongelmia. Lisätietoja siitä voi lukea täältä.

Yhteenveto 
Attribuuttien käyttö moraalisesti vanhentunut, koska HTML-koodin pätevyydestä sinun on käytettävä siirtymäkautta Oppii.

. Taustavärin asettaminen HTML: ssä käyttää erikoiskoodeja, joita voit selvittää graafisessa toimittajalla tai käyttää erityisiä verkkopalveluita. Taustakuva on päällekkäinen pinta-alan hännälle ja se sijaitsee taustavärin yläosassa. Taustakuvan määrittäminen on parempi käyttää koko URL-osoitettaan. Minulla on kaikki tässä. Kiitos huomiosta. Onnea!

Lyhyt linkki: http://goo.gl/03tsnz Kuinka tehdä tausta sivustolle? Jokainen huone näyttää paljon paremmalta, jos hänen lattia nousee rakas Persian matto. Joten pahempi sivustosi? Ehkä on aika ja hänen lattia " aseta
  • »Kallis tyylikäs käsintehty palatsi. Ymmärrämme enemmän siitä, miten tehdä tausta sivustolle:
  • Se tapahtuu, että sivuston vanha muotoilu on jo tullut. Ja haluan jotain uutta ja maukasta. Ja uusi muotoilu on sellainen, jos kokit sen omalla kädet.
  • Mutta muuttamaan täysin kaiken resurssin suunnittelua - asia on kiittämätön. Kyllä, eikä kaikilla on asia tästä. "
  • teroitettu

"Kädet. Siksi on helpoin virkistää vanha malli, muuttaa resurssin tai sen taustakuvan taustan väriä.

On olemassa useita tapoja muuttaa taustalla sivustoa. Tämä käyttää mahdollisuuksia. 
CSS. tai . Mutta monet taustalla työskenteleville ominaisuuksilla on sama nimi ja sovellusmenetelmä näissä verkkoteknologioissa.
  • Taustaksi voit käyttää useita kohteita: Väri; ;
  • Taustakuva;
  • Teksti-kuva. Käsittelemme kunkin heistä tarkemmin. Jos haluat asettaa sivuston selkätausta, ominaisuus käytetään.

taustaväri.

Tyyli attribuutti 

Tyyli. . Toisin sanoen asettaaksesi verkkosivun perusvärin, sinun on rekisteröitävä se <Body> -tunnisteen sisällä. Esimerkiksi: <Body Style = "tausta-väri: # 55d52b"> <p> Sivuston tausta # 55d52b </ p> </ body>

Heksadesimaalisen värikoodin lisäksi arvoa tuetaan avainsanimuodossa tai

RGB. 

. Esimerkkejä:

<Body Style = "tausta-väri: RGB (51,255 153)"> <p> RGB: n verkkosivuston tausta (23,113,44) </ p> </ body> <Body Style = "Tausta-väri: vihreä"> <p> Vihreän verkkosivuston tausta </ ​​p> </ body> Taustavärin asettaminen avainsanoilla on useita rajoituksia verrattuna jäljellä oleviin kahteen tapaan.

Yhteensä 16 avainsanaa tuetaan värin asettamiseksi. Tässä on joitakin niistä:

Valkoinen, punainen, sininen, musta, keltainen Muut. Siksi sivuston taustalla

On parempi käyttää heksadesimaalimuotoa tai 

Värin valitsemisen lisäksi muita asetuksia on käytettävissä. Jos omaisuus Aseta arvo Läpinäkyvä

Sivun tausta tulee läpinäkyväksi. Tämä arvo on osoitettu tähän ominaisuus oletusarvoisesti. Tarkastele nyt hypertext-kielen mahdollisuutta asentaa sivuston taustakuvio. On mahdollista tehdä siitä omaisuutta. taustakuva.

Esimerkki: 

<Body Style = "taustakuva: URL (img_1809.jpg)"> </ body>

Kuten koodista voidaan nähdä, kuvan sitominen tapahtuu polun läpi

Url

Lähetetty suluissa. Mutta kaikki kuvat eivät osoittaudu niin suuriksi, jotta täytät koko näytön koko koko niiden koko. Katsotaanpa, miten pienempi kuva tulee näkyviin.

Oletetaan, että kehitämme sivustoa runoudesta ja substraattista, jota sinun on käytettävä Pegasuksen kuvaa. Siivekäs hevonen persoonata vapauden luovan ajattelun runoista!

Tarvitsemme, että kuva näkyy näytön keskellä kerran. Mutta valitettavasti selain ei ymmärrä sublime-toiveitamme. Ja näyttää pienemmän kuvan sivuston taustalle niin monta kertaa kuin näytön alue mahtuu:

Todennäköisesti neljä hymyilevä hevoset, joissa on runoilijoiden siivet, ovat liian paljon inspiraatiota varten. Siksi kieltää Pegasuksen kloonaus. Tee se omaisuutta

Tausta-REPEAT. . Mahdolliset arvot: Toista-X - taustakuvan toistaminen vaakasuoraan;

Joten me helpottaa tehtävää asettaa takaisin tausta kahdesta kuvasta: animaatio ja säännöllinen kuva. Tällöin GIF-animaatio vahvistetaan, ja piirustus vieritetään yhdessä sivun sisällön kanssa.

Toista-Y - pystysuoraan;

Toista - molemmilla akseleilla;

Ei-toisto - toisto on kielletty.

Lueteltujen vaihtoehtojen joukossa olemme kiinnostuneita viimeisestä. Ennen sivuston taustan vaihtamista käytämme sitä koodissasi:

<Body Style = "taustakuva: URL (3.jpg); tausta-toisto: ei-toisto"> </ body>

Mutta tietenkin se on parempi, jos letOw sijaitsee keskellä näytön. Kiinteistö

Tausta-asema Vain on tarkoitettu sijoittamaan taustakuvio sivulle. Aseta sijaintikoordinaatit useilla tavoilla:
. Toisin sanoen asettaaksesi verkkosivun perusvärin, sinun on rekisteröitävä se <Body> -tunnisteen sisällä. Esimerkiksi: Avainsana (
<Body Background = "/ Images / BG.JPG"> Yläosa, pohja, keskus, vasen, oikea)
tai Prosentit - lähtölaskenta alkaa vasemmassa yläkulmassa;
Jokainen huone näyttää paljon paremmalta, jos hänen lattia nousee rakas Persian matto. Joten pahempi sivustosi? Ehkä on aika ja hänen lattia " Mittayksiköissä (
(Värin valinta) Pikselit
). Käytämme helpoin vaihtoehtoa keskitykselle:

<Body Style = "taustakuva: URL (3.jpg); tausta-toisto: ei-toisto; tausta-asema: Top Center"> </ Body>

Se tapahtuu, että sinun on korjattava piirustuksen sijainti vierityksen aikana. Siksi ennen kuvan kuvaa, käytä erikoisominaisuutta.

Tausta-liite.

. Voimassa olevat arvot: <ul> <li> Scroll; </ li> <li> kiinteä. </ Li> </ ul>

Tarvitsemme viimeisen merkityksen. Nyt esimerkin koodi näyttää tältä: [/ html] 
<Body Style = "taustakuva: URL (3.jpg); tausta-toisto: ei-toisto; tausta-asema: Top Center; tausta-liite: kiinteä"> </ body> 

Ensimmäisessä esimerkissä taustalla käytimme suurta ja kaunista aavikkomaisemaa. Mutta tällaisesta kauneudesta sinun on maksettava täynnä. Korkealaatuisen kuvan paino voi saavuttaa useita megatavua.

Tämä äänenvoimakkuus ei vaikuta selaimen sivun latausnopeuteen nopean yhteyden kanssa Internetin kanssa. Mutta entä matkapuhelin Internet, kun käytät useita "useita"

mittarit

"Kestää paljon aikaa?

"Kestää paljon aikaa? Kaikki nämä ongelmat ratkaistaan ​​tekstuurin taustalla. Se käyttää pientä kuvaa tekstuurin mallina. Jopa useiden toistojen kunto, kuvio ladataan vain kerran.

Luodaan tumma tausta sivustolle Elin. Photoshop. Elin. , Luo kuva pitkän 1200 pikselin nauhan muodossa ja leveys 15 pikseliä. Sitten käytämme yksinkertaista mustavalkoista kaltevaa ja liittäkää tuloksena oleva tekstuuri sivuston sivulle:

<Body Style = "taustakuva: URL (1.png); Väri: RGB (0,51,204)"> </ body>

Selvyyden vuoksi lisätään tekstiä ja asetan sen värillä omaisuutta. Elin. Väri Elin. . Se tapahtui:

  • Korkeus: 200%; Kaikki edellä kuvatut ominaisuudet ovat myös sovellettavissa Cascading Style -levyille. Luo sivuston tausta
  • taustakuva CSS.
  • Kirjoittamalla uudelleen yksi edellisistä esimerkeistämme: <Head> <TITLE> Asiakirja Untitled </ Title> <Style Type = "Text / CSS"> Body {taustakuva: URL (3.jpg); tausta-toisto: Ei-toisto; Tausta-asema: Top Center; tausta-liite: kiinteä;} </ tyyli> </ Head> <Body> </ Body>
  • Tulos on samanlainen. No, katselimme kaikkia vaihtoehtoja, miten muuttaa taustalla sivustoa. Nyt on vielä vain luopua tulevasta matosta ja levittää sitä resurssiisi sivuille. Mutta tämä on kätesi.
  • Hyvä päivä kaikille oppia ja oppia jotain uutta! Oletko koskaan kiinnittänyt huomiota sivuston ulkonäköön, kun kehität tekijöitä ovat laiska järjestää sivujen tausta? Ja käänsin. Se näyttää teurastusta. Usein tavanomaisten erojen puuttumisen vuoksi eri tyyppisten tietojen välillä se sekoitetaan ja katoaa halun tarkastella tällaista verkkoresurssia. Joten tällaiset ongelmat tapahtui projektillesi, päätin kirjoittaa artikkelin aiheesta: "Kuinka tehdä tausta sivu sivuja HTML." Julkaisun lukemisen jälkeen opit, millä työkaluilla voit asettaa taustan suunnittelu, miten tehdä tausta kiinteä tai muuttuu ja paljon muuta, mikä auttaa tekemään verkkosivustosi houkuttelevaksi. Nyt aloitetaan!
  • Perustyökalut tausta-sivujen asettamiseksi Taustakuvan asettaminen, Web-kielen kehittäjät ovat antaneet attribuutin taustan. Se on saatavilla sekä HTML: ssä että CSS: ssä.
  • Markup-kielellä tämä on kehon tunnisteen ominaisuus ja tyylipöydissä - Universal-ominaisuus, jonka avulla voit asettaa jopa 5 takasuunnitelman ominaisuuksia samanaikaisesti. Tausta on melko joustava elementti, jota voidaan käyttää taustalle väri, värikuvaksi tai jopa animaatioksi. Joten, asentamalla taustakuva yksikön HTML <body> mukaan, riittää kirjoittamaan tällainen koodi:
  • <Body Background = "Tiedoston osoite"> ... </ body> Ja sanojen "tiedoston osoitteen" sijaan aseta polku kuvaan.
  • Kuitenkin huomaa! Jos taustan muodossa haluat nähdä väripaletista määritetyn Monochon-kankaalla, niin tämä tehdään käyttämällä BGColor-attribuuttia. Esimerkiksi <body bgcolor = "# 000000"> ... </ body>, kysyimme mustan taustamme sivustollemme.
  • CSS: n ja HTML: n värit asetetaan joko englanninkielisellä sanalla (esimerkiksi punainen) tai erityinen koodi, joka koostuu merkki # ja kuusi merkkiä sen jälkeen (esimerkiksi # ffdab9). Kun kirjoitat toisen vaihtoehdon kehittäjille erikoistuneissa ohjelmistotuotteissa, paletti ilmestyy automaattisesti edessäsi. Jos olet juuri aloittanut näiden verkkokielten oppimisen, värikoodi voidaan sijoittaa Internetissä.

Taustaa omaisuutta Cascading Style -taulukoissa Korkeus: 200%; :

Se on asetettu tai erillisessä tiedostossa CSS-tyylejä tai <Style> -elementissä. Tämän ominaisuuden avulla voit asentaa taustakuvioita tai värejä määrittää sivun aloituspaikan, asettaa toistuvat ja kiinteät kuvat. Selvyyden lisäämiseksi tein määritelmät taulukossa. 

Parametrit Tarkoitus

Käytetään asentamaan kiinteä tai vieritetty kuva yhdessä sivuston sisällön mukana. Tapahtuu kiinteäksi, selaamalla ja periä

Asettaa taustakuvan. Se voidaan osoittaa samanaikaisesti värin kanssa. Sitten jälkimmäinen näkyy, kunnes kuva on täysin ladattu.

Asettaa edellisen parametrin objektin alustavan sijainnin. Horisontaalisesti ilmaisee oikean, vasemman ja keskityksen ja pystysuoraan - pohjaan, ylhäältä ja keskelle. Lisäksi voit periä aseman (periä), joka asetetaan prosentteina, pikseleinä ja muissa ulottuvuuksissa 

Käytä, kun käytät taustakuvan attribuuttia. Säätää, miten kuva toistetaan. Voit määrittää 2 arvoa: vaakasuoraan ja pystysuoraan. On ominaisuuksia: ei-toisto, toista, toista-x, toisto-y, periä, tila

Добавить комментарий