Kuinka lisätä hauskoja CSS-taustoja sivustoihisi

Sep 11, 2025

Miten tehdään

Aika oli web-sivulla tausta oli pieni laatta kuva - ja usein hirveä, hyökkäsi jokaisen kävijän silmämunat. Tänään taustat muodostavat perustan paljon online graafisen suunnittelun.

Tämä vallankumous Webin taustalla on ohjaa CSS: n edistymistä. Web-standardit tarjoavat nyt paljon enemmän hallintaa, joten voit tarkasti määritellä taustan aseman, työskennellä kaltevuuksilla ja lisätä useita taustoja yhdelle elementille.

Kaikilla tämän alueen kattaminen edellyttäisi kirjaa, joten olemme ottaneet joitain tärkeitä lähtöpisteitä, jotka pääsevät sinuun ja outoa valintayhteys voit tutustua edelleen. Nauttia!

Lisää CSS-taustat Web-sivuelementteihin

CSS-taustat vaativat tausta lyhyt ominaisuus tai tarkempien ominaisuuksien käyttö, kuten (mutta ei rajoittuen): taustaväri ; taustakuva ; tausta-asema ; taustakoko ; tausta-toisto ; ja tausta-liite . Nämä voidaan määritellä Web-sivun taustalle (läpi runko valitsin) tai sivuelementit kuten otsikot, divit ja niin edelleen.

Perustasossa voit käyttää tausta Sivun kääntäminen punainen:

 Body {
 Taustaa: punainen;
 }

Menossa hieman edistyksellisempi, voit lisätä kuvan, joka on vaakasuoraan keskitetty, 20px sen säiliön yläosasta, jota ei ole toistettu ja kiinnitetty paikalleen Web-sivun vieritys:

 Body {
 Tausta: URL (Image.png) Keskus 20px Ei-toisto;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Kuva taustakuvaksi (Huomautus: Vältä tätä alhaista kontrastia omissa malleissa)

Jos halusit kirjoittaa sen ilman käyttämättä tausta Pikahaku, se näyttäisi näin:

 Body {
 Taustakuva: URL (image.png);
 Tausta-asema: Center 20px;
 Tausta-REPEAT: ei-toisto;
 Tausta-liite: kiinteä;
 }

Jos haluat lisätä useita taustoja elementtiin, voit pilkulla erillisiä arvoja CSS-ilmoituksessa. Huomaa, että kumpi kohde on määritetty ensin, on pinon yläosassa, eli se näkyy "edellä" muiden taustat.

 Body {
 Taustaa: URL (image.png) Center 20px Ei-toisto kiinteä, URL (Image-2.png) Center Center No-Repeat Fix;
 }

Tällöin yksi kuva näkyy edellisessä esimerkissä ja yksi "alla" suoraan sisällön alueen keskelle.

Muuta taustakuvia

Toistaiseksi, olemme välttäneet taustakoko . Mutta se on melko tärkeä, koska sen avulla voit hallita taustakuvan kokoa. Erityisesti voit määrittää kuvan horisontaaliset ja pystysuorat mitat pikseleissä tai prosentuaalisesti, kuten:

 Taustanumero: 200px 50px;

On myös kaksi avainsana-arvoa, joita voidaan käyttää sen sijaan: sisältää ja peite . Nämä ovat laajalti samankaltaisia, tarjoamalla keino skaalata kuvan elementin sisältöalueella. Ero on se sisältää on suunniteltu tekemään kuvan mahdollisimman suuri, samalla kun se näytetään kaikki sen sisältöalueella (eli tavallisesti saada aukkoja sen ympärille), kun taas peite Kattaa kokonaan sisältöalue, mutta se voi johtaa siihen, että osa kuva ei ole näkyvissä. Jälkimmäistä käytetään yleisesti sivustoja, jotka käyttävät valokuvia taustana.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS 'Sisältää' (top) versus 'Cover' (pohja) arvot

Huomaa, että voit lisätä taustakoko a tausta Lyhyt määritelmä - aseta se sen jälkeen tausta-asema Arvot, eteenpäin viiva, joka erottaa kaksi:

 Tausta: URL (image.png) Center 20px / Sisältää Ei-toistoa kiinteä

Käytä high-resline taustakuvia

Kun lisäät high-res retina taustat, taustakoko On myös hyödyllinen tällaisten kuvien pakottamiseksi oikeaan kokoon.

Kuvittele esimerkki a jakaa kanssa id of logo . Tämä, sopivasti, on logo, jota sovelletaan taustana CSS: ssä. Se on 150 pikseliä, joten käytät CSS: tä, joita käytät:

 #Logo {
 Leveys: 150px;
 Korkeus: 150px;
 Taustaa: URL (logo.png) ei-toisto;
 }

High-Res noudattaa asioita. Emme halua pakottaa vanhempaa laitteistoa lisäämällä suurempia kuvia, joten mediakyselyä on käytettävä suurempi resoluution logon lataamiseen vain tuetulla laitteistolla.

 @Media (-Webkit-Min-Device-Pixel-suhde: 2),
 (Min-resoluutio: 192DPI) {
  #Logo {
   Taustakuva: URL ([email protected]);
  }
 }

Ongelma nyt on @ 2x high-res image on 300 pikseliä (koska sillä on kaksinkertainen alkuperäisen resoluution), mutta sitä käytetään 150-pikseli-neliön säiliön taustana. Joten tässä vaiheessa näet vain neljänneksen.

A high-res image before a resize fix — High-res-kuva ennen kokoa korjaus

Tämä on vahvistettu määrittämällä tietty taustakoko arvosta #logo :

 #Logo {
 Leveys: 150px;
 Korkeus: 150px;
 Taustaa: URL (logo.png) ei-toisto;
 Taustanumero: 150px 150px;
 }

High-res logo, nyt tiukasti sen säiliön sisällä

Nykyaikaisempi tapa työskennellä useiden tausterasvointiin ja saman tuloksen saavuttaminen on CSS4: n kuvasarja :

 #Logo {
 Taustakuva: Kuvan asetus (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  );
 }

Edut kuvasarja ovat yksinkertaisempia CSS ja käyttäjän agentti, joka määrittää kuvan, jota on käytettävä. Haittapuoli on selaimen tuki - kirjoitushetkellä - pysyy epätäydellinen. Käy tässä testisivulla Nopea keino tarkistaa, miten selaimet tukevat hintaa. (Tämä on ehkä miksi monet suunnittelijat Käytä skriptejä automatisoida palvelemaan korkean reses-kuvan .)

Työskentele alfa-kanavilla ja kaltevuuksilla

Lopullinen kärki tässä Blazing Fast (Web-sivuston opetusohjelmassa) Artikkeli koskee alfa-kanavia ja kaltevuuksia. Kun internet oli höyrykäyttöinen, sinulla oli usein suunnittelijat käyttävät "tarkistuslauta" GIF: t simuloimaan alfa-kanavia (jokainen muu pikseli oli läpinäkyvä). Nyt annat vain värit RGBA: ssa:

 Main {
 Tausta: RGBA (255,255,255,0,7);
 }

Edellä mainitussa esimerkissä tausta olisi 70 prosenttia valkoista, mikä mahdollistaa sen alla olevan sen alla. Sinun täytyy olla varovainen säilyttääkseen selkeyttä, kun käytät monimutkaisten kuvien yläpuolella olevia puolivalmisteisia taustoja, mutta ne voivat olla erinomaisia lisäämällä visuaalista kiinnostusta verkkosivuille.

Alpha channels, gradients, and some questionable colour choices — Alfa-kanavat, kaltevuudet ja joitakin kyseenalaisia värivaihtoehtoja

Vastaavasti web-suunnittelijoita käytetään tuottamaan ja laatta GIF: itä, jos he halusivat kaltevuuden taustana, mutta se ei ole enää välttämätöntä, ellet halua juhlia kuin se on 1999. Näinä päivinä haluat CSS3: n lineaarinen gradientti ja radiaalinen gradientti Ominaisuudet, joista määrität ohjeet ja väri pysähtyvät.

Tässä on CSS-sääntö, jossa on perusgradientti:

 H1 {
 Tausta: Lineaarinen gradientti (oikealle, RGBA (255,255,255,1), RGBA (255,255,255,0));
}

Tätä sovelletaan tasoihin ja yksi otsikot, jotka antavat heille lineaarisen kaltevuuden, joka menee vasemmalta oikealle, alkaen kiinteä valkoinen ja päättyy läpinäkyvään valkoiseen.

Kulmien ja useiden väripysäkkien avulla voit mennä paljon, paljon edelleen kaltevuuksilla. Kokeile, yritä käyttää Photoshop-kaltaista CSS gradienttigeneraattori ja tutkimalla koodilähtö (on tietoinen, että linkitetty esimerkki lisää syntaksi vanhempien selaimille - vain napata lineaarinen gradientti linja omaan käyttöön).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Koska CSS-kuviot galleria osoittaa, voit tehdä todella hienoja asioita CSS-kaltevuuksilla

Jos haluat tarkistaa, mitä maustetut web-ammattilaiset voivat tehdä kaltevuuksilla ja taustakoko , tutustu Lea Verou CSS3-kuviot galleria . Sieltä löydät runsaasti live-esimerkkejä, jotka käyttävät CSS-kaltevuuksia luomaan kaikenlaisia vakavasti vaikuttavia taustakuvioita.

Ja kyllä, siellä on vihje siitä, missä me tulimme silmäpallon hyökkäyksistä joissakin niistä.Mutta kuten kaikessa Web-taustalla, avain on varmistaa, mitä lisäät, on merkityksellinen suunnittelun yhteydessä ja - mikä tärkeintä - että taustat eivät häiritse sisältöä tai tehdä sitä lukukelvottomiksi.

Liittyvät linkit:

Opas paremman CSS: n kirjoittamiseen
Luo reagoiva asettelu CSS-verkkoon
CSS temppuja mullistamaan ulkoasut

Kuinka lisätä hauskoja CSS-taustoja sivustoihisi

Lisää CSS-taustat Web-sivuelementteihin

Muuta taustakuvia

Käytä high-resline taustakuvia

Työskentele alfa-kanavilla ja kaltevuuksilla

Miten tehdään - Suosituimmat artikkelit

Piirrä kontrastin teho

Kuinka tehdä Rose: aloittelija ja kehittyneet vinkit

Miten luoda sovellus Vue.js

Kuinka luoda kuohuviini silmät öljymaalissa

Miten prototyyppi mobiilisovellus origami studiolla

Kuinka veistää elokuva 4d

Mock Up AR-grafiikka jälkeen vaikutukset

Luo 3D-palovaikutuksia

Luokat