CSS: hondoa

Elementuek hondo bat izan dezakete, elementuaren edukiaren atzean eta edukiak eta betelanak hartzen duten eremuan zehar erakusten dena. Fondoa kolorez eta irudiz osatuta egon daitekeenez, CSSk hainbat propietate definitzen ditu hori sortzeko.

• background-color —Propietate horrek kolore bat ematen dio elementu baten hondoari.
• background-image —Propietate horrek irudi bat edo gehiago esleitzen dizkio elementu baten hondoari. Artxiboaren URLa url () funtzioarekin deklaratzen da (adibidez, url (“adreiluak.jpg”)). Irudi bat baino gehiago behar izanez gero, balioak koma batez bereizi behar dira.
• background-position —Propietate horrek hondoko irudi baten hasierako posizioa adierazten du. Balioak ehunekotan, pixeletan edo center, left, right, top eta bottom gako-hitzen konbinazio bat erabiliz zehaztu daitezke.
• background-size —Propietate horrek hondoko irudiaren tamaina adierazten du. Balioak ehunekotan, pixeletan edo cover eta contain gako-hitzak erabiliz zehaztu daitezke. cover hitz giltzarriak irudia zabaltzen du, haren zabalerak edo altuerak elementuaren eremua estaltzen duten arte; contain gako-hitzak aldiz, irudia estalti egiten du, eta elementuaren eremu osoa okupatu.
• background-repeat —Propietate horrek zehazten du nola banatzen den hondoko irudia lau gako-hitz erabiliz: repeat, repeat-x, repeat-y eta no repeat.
  • Repeatgako-hitzak ardatz bertikalean eta horizontalean errepikatzen du irudia
  • repeat-xgako-hitzak ardatz horizontalean errepikatzen du irudia
  • repeat-ygako-hitzak ardatz bertikalean errepikatzen du irudia
  • norepeathondoko irudia behin bakarrik erakusten du
• background-origin —Propietate horrek zehazten du hondoko irudia elementuaren eremuaren ertza, betelana edo edukia kontuan hartuta kokatuko den. Balio erabilgarriak border-box, padding-box eta content-box dira.
• background-clip —Prpietate horrek hondoak estali beharreko eremua aitortzen du border-box, padding-box eta content-box balioak erabiliz.
  • border-boxbalioak elementuaren kaxaren ertzeko irudia mozten du
  • padding-boxbalioak kaxaren betegarrian irudia mozten du
  • content-boxbaliak kaxaren edukiaren inguruko irudia mozten du
• background-attachment —Propietate honek zehazten du irudia estatikoa den edo gainerako elementuekin desplazatzen den, bi balio erabiliz: scroll (lehenetsita) eta fixed.
  • scrollbalioak irudia orriarekin mugiarazten du
  • fixedbalioak hondoko irudia jatorrizko lekuan finkatzen du

Funtsik ohikoenak koloreekin sortzen dira. Hurrengo arauak background-color propietatea ezartzen du, gure dokumentuaren goiburuari hondo gris bat gehitzeko.

          
            header {
              margin: 30px;
              padding: 15px;
              text-align: center;
              background-color: #CCCCCC;
              }
            #titulua {
              font: bold 26px Verdana, sans-serif;
              }
          
Atzealdea (Hondoa) koloreztatu dugu
         

Alboetan 30 pixeleko marjinak definitzen ditugunez, goiburua nabigatzailearen leihoan zentratuta geratzen da, baina < header> elementuaren barruko testua ezkerrean lerrokatuta dago oraindik (lerrokadura lehenetsia). 3-47 zerrendaren adibidean, funtsa aldatzeaz gain, izenburua zentratzeko text-align jabetza ere sartzen dugu.

Goiburuaren atzealdeari kolorea eman zaio

Koloreez gain, hondoko irudiak ere erabil ditzakegu. Kasu honetan, hondoa background-image jabetzarekin deklaratu behar dugu eta irudiaren URLa url funtzioarekin () deklaratu, hurrengo adibidean egiten dugun bezala.

          
            header {
              margin: 30px;
              padding: 15px;
              text-align: center;
              background-image: url ("adreiluPareta.png");
              }
            #titulua {
              font: bold 26px Verdana, sans-serif;
              }
          
         
3-48 Kodea

Tituluaren atzealdeari irudia jarri zaio

Irudiekin arazoa da ez direla beti elementuak sortutako kaxaren tamaina berekoak. Horregatik, nabigatzaileek behin eta berriz errepikatzen dute irudia, eremu osoa estali arte.

Goiburuaren atzealdeko irudia errepikatu egiten da horizontalean

Egin ezazu zuk zeuk: Ordezkatu CSS artxiboko arauak 3-48 Kodeko arauekin. Deskargatu adreiluen irudia.jpg gure webgunetik. Kopiatu irudia zure irudia dagoen direktorio berean dokumentua. Ireki dokumentua zure nabigatzailean. 3-22 irudian agertzen denaren antzeko zerbait ikusi beharko nuke.

Lehenetsitako portaera aldatu nahi badugu, eskura ditugun hondoko gainerako propietateak erabil ditzakegu. Adibidez, berroinezko balioa esleitzen badiogu -eta background-repeat jabetzari, nabigatzaileak ardatz bertikalean soilik errepikatuko du irudia.

          
            header {
              margin: 30px;
              padding: 15px;
              text-align: center;
              background-image: url ("adreiluPareta.png");
              background-repeat: repeat-y;
            }
            #izenburua {
              font: bold 26px Verdana, sans-serif;
            }
          
Hondoa konfiguratzen
         

Goiburuaren atzealdeko irudia bertikalean errepikatzeko eskatu dugu. Irudiak altuera nahiko duenez, ez da ikusten errepikapena eta eskuinean tarte bat hutsik uzten du.

Gure diseinuak hainbat balio eskatzen dituenean funtsa konfiguratzeko, denak batera adieraz ditzakegu background propietatearekin. Jabetza horrek aukera ematen digu funtsaren hainbat alderdi kode-lerro bakar batean deklaratzeko.

          
            header {
              margin: 30px;
              padding: 15px;
              text-align: center;
              background: #CCCCCC url ("ladrillosclaros.jpg") repeat-y;
            }
            #izenburua {
              font: bold 26px Verdana, sans-serif;
            }
          
Goiburuaren atzealdeko irudia bertikalean errepikatuta eskuinean hutsik geratu den zatia koloreztatu egingo da..
         

Goiko erregelak lehen erabiltzen ditugun balio berberak zehazten ditu, baina orain atzeko irudi bat eta kolore bat konbinatzen ditu. Emaitza 3-24 irudian ageri da.

3-24 irudia. Goiburuaren atzealdeko irudia bertikalean errepikatuta eta beste kolore batekin konbinatuta, eskuineko tartea koloreak betetzen du.