A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Szín- és háttérbeállítás stíluslappal /A háttérkép beállításai (II. rész)

Tartalomjegyzék

Szín- és háttérbeállítás stíluslappal
- A háttérkép beállításai (II. rész)
- Szegély mintázat (kép) beállítása (border-image)

Szín- és háttérbeállítás stíluslappal

A háttérkép beállításai (II. rész)

A háttérkép széleinek levágása (background-clip)

A background-clip segítségével levághatjuk a rendelkezésre álló helyből esetlegesen kilógó képrészeket.

Értékek:

border-box: hatására a böngésző levágja a háttérképnek az elem szegélyén túl kilógó részeit. (ez az alapértelmezett)
padding-box: a böngésző levágja a háttérképnek a belső térköz külső határán kívül eső részeit.
content-box: hatására böngésző levágja a háttérképnek az elem tartalmán túllógó részeit.

Példa

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Háttér levágása</title>
<meta charset="utf-8">
<style type="text/css">
 div {
    background-image:url('specialis/css/hangjegy.png'); /*háttérkép beállítása*/
    width:170px;    /*szélesség beállítása*/
    height:170px;   /*magasság beállítása*/
    margin:20px;    /*margó beállítása*/
    float:left;     /*balra lebegtetés*/
    border:15px double rgba(0,0,0,0.3);  /*szegély beállítása*/
     background-color:beige;  /*háttérszín beállítása*/
     background-repeat: repeat; /*háttérkép ismétlődik*/
     padding:20px;
     }
div span  { /*beállítjuk a divben megjelenő feliratsáv tulajdonságait */
    display:block; 
    background-color:rgba(0,200,0,0.9);
    color:white; 
    font-weight:bold;
    text-align:right;
    padding:5px;
    }
      
div:nth-child(1) {background-clip: padding-box; }     
div:nth-child(2) {background-clip: border-box; }     
div:nth-child(3) {background-clip: content-box; }     
    
</style>
<body>
  <div><span>padding-box</span></div>
  <div><span>border-box</span></div>
  <div><span>content-box</span></div>
</body>
</html>

Vissza a tartalomjegyzékhez

Több háttérkép megadása (multiple background)

A background-image paraméterben vesszővel elválasztva egyszerre több képet is értékül adhatunk, így egyszerre több háttérképet állíthatunk be. Az első megadott háttérkép kerül a legfelső rétegre, alá a következő és így tovább

Ezen hátterek tulajdonságait a többi háttérparaméter esetén ugyanígy, vesszővel elválasztva adhatjuk meg.

Ha a tulajdonságoknak nem adunk elég értéket, akkor a böngésző a meglevő paraméterlistát addig ismételgeti, amíg szükséges.

Példa

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Több háttér beállítása</title>
<meta charset="utf-8">
<style type="text/css">
 div {
    width:170px;    /*szélesség beállítása*/
    height:170px;   /*magasság beállítása*/
    margin:10px;    /*margó beállítása*/
    float:left;     /*balra lebegtetés*/
    border:2px solid black;  /*szegély beállítása*/
    background-color:beige;  /*háttérszín beállítása*/
     }
div {
    background-image:url('specialis/css/viragok.jpg'),
    url('specialis/css/levelek.jpg'); 
    /*többszörös háttérkép beállítása*/
    }
div span {
          background-color:darkgreen;
          color:white;
          padding:3px;
          }
     
    div:nth-child(1) 
          {
            background-repeat:no-repeat,no-repeat;
            background-position:top left,bottom right;
          }
     div:nth-child(2) 
          {
            background-repeat:repeat-x,repeat-y;
            background-position:top left,top right;
          }
          
     div:nth-child(3) 
          {
            background-repeat:repeat-y,repeat-y;
            background-position:top left,bottom right;
          }
     div:nth-child(4) 
          {
            background-repeat:repeat-y,repeat;
            background-position:top left,bottom right;
          }
    
</style>
<body>
  <div><span>1.</span></div>
  <div><span>2.</span></div>
  <div><span>3.</span></div>
  <div><span>4.</span></div>
</body>
</html>

Magyarázat

Az első példában a két háttérképet nem ismételtetjük és ellentétes sarkokba pozícionáltuk.
A második példában az első kép vízszintesen ismétlődik, a második függőlegesen. A virágos kép azért takarja a leveket tartalmazó képet, mert az előbbit adtuk meg a listában először.
A harmadik példában mindkét képet függőlegesen ismételtetjük.
A negyedik példában az első kép függőlegesen ismétlődik, míg a második kép mozaikszerűen.

Vissza a tartalomjegyzékhez

A background gyorstulajdonság (background)

A background gyorstulajdonsággal az eddig vett háttértulajdonságokat egyetlen nagy értékadássá vonhatjuk össze.

Értékek:

Az különböző értékeket szóközzel választjuk el egymástól.

Először adjunk meg egy háttérszínt, egy tetszőleges színérték segítségével.
Ezután adjuk meg a háttérképet egy url segítségével.
Adjuk meg a háttérkép pozícióját.
Ezután adjuk meg a háttér méretét.
Majd adjuk meg a kép ismétlődési szabályát.
Ezután adjuk meg a kép gördíthetőségét.
Ezt követően megadhatjuk a háttérkép elhelyezésére (background-origin) vonatkozó értéket.
Adjuk meg a background clip értéket.
Lehetőségünk van egyetlen background gyorstulajdonságnak több ilyen értéklistát megadni, ha több hátteret is szeretnénk egyszerre. Ezeket vesszővel választjuk el egymástól.
Ha csupán az inherit értéket adjuk értékül, akkor a tulajdonság éréke a szülőelemtől öröklődik meg.

Szegély mintázat (kép) beállítása (border-image)

A border-image tulajdonság segítségével saját képpel bírálhatjuk felül a szegélystílust. Ezt a képet a böngésző kilenc részre vágja, amiből a középső részt elhagyja, sarkokat a szegély sarkainál használja fel, a széleket pedig nyújtva vagy ismételve a szélekhez használja fel.

Paraméterek és értékeik:

A tulajdonság paraméterei szóközzel vannak elválasztva.

Először adjuk meg a háttérképnek szánt képre mutató url-t.
Ezután következik egy legalább egy, legfeljebb négy lehetséges hosszúságérték paramétert tartalmazó szóközzel elválasztott paraméterlista. Ezek az értékek megadják, hogy melyik oldalról a kép szélétől számítva hány pixelnyire kell megvágni azt.
- Egy paraméter esetén, ez minden oldalról ugyanaz a távolság lesz.
- Két paraméter esetén az első a felső és alsó, a második a jobb és a bal oldali távolságot határozza meg.
- Három érték esetén az első a felső, a második a jobb és bal, a harmadik az alsó távolságot határozza meg.
- Négy érték esetén az első a felső, a második a jobb, a harmadik az alsó és a negyedik a bal távolságot határozza meg.
Végül megadjuk, hogy a feldarabolt kép széleit hogyan használjuk fel a szegélyszéleinek:
- A strech érték hatására a böngésző a szükséges méretűre nyújtja a képszeletet.
- A repeat érték hatására a böngésző nyújtás helyett addig ismétli a képszeleteket, amíg szükséges.
- A round érték hatása ugyanaz, mint a repeat azonban átméretezi annyira a képszeleteket, hogy mintázatuk pontosan illeszkedjen a sarokpontokkal.

Tanulási tipp

A tulajdonság kipróbálásához javasoljuk felkeresni a Border-image-generator oldalt, ahol az egyes paramétereket dinamikusan lehet változtatni.

Vissza a tartalomjegyzékhez

Fel a lap tetejére

A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.