Ostatnio edytowany:

background-clip

Autor: Virtual Patriot

Opis właściwości background-clip

Za pomocą właściwości background-clip możemy określić sposób przycięcia tła interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości background-clip

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości background-clip

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości background-clip

border-box

Opis

Wartość border-box jest domyślną wartością właściwości background-clip.

Domyślnie tło elementu HTML jest przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania tego elementu HTML.

Przykład

tło tego elementu "div" jest przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania tego elementu "div"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        border:15px dashed black;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      tło tego elementu "div" jest przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania tego elementu "div"
    </div>

  </body>
</html>

padding-box

Opis

Za pomocą wartości padding-box właściwości background-clip możemy sprawić, że tło interesującego nas elementu HTML zostanie przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML.

Przykład

tło tego elementu "div" zostało przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z wartością "padding-box"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-clip:padding-box;
        border:15px dashed black;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      tło tego elementu "div" zostało przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z wartością "padding-box"
    </div>

  </body>
</html>

content-box

Opis

Za pomocą wartości content-box właściwości background-clip możemy sprawić, że tło interesującego nas elementu HTML zostanie przycięte do obszaru wyznaczonego przez rozmiar zawartości tego elementu HTML.

Przykład

tło tego elementu "div" zostało przycięte do obszaru wyznaczonego przez rozmiar zawartości tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z wartością "content-box"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-clip:content-box;
        border:15px dashed black;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      tło tego elementu "div" zostało przycięte do obszaru wyznaczonego przez rozmiar zawartości tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z wartością "content-box"
    </div>

  </body>
</html>

sekwencja wartości

Opis

Jeżeli zdecydowaliśmy się na to, aby tło interesującego nas elementu HTML składało się z kilku obrazków jednocześnie, wtedy za pomocą sekwencji kilku (oddzielonych od siebie znakiem przecinka) wartości należących do właściwości background-clip możemy określić osobny sposób przycięcia poszczególnych obrazków tworzących tło obrazkowe interesującego nas elementu HTML (kolor tła elementu HTML zostanie przycięty na podstawie ostatniej wartości występującej w sekwencji wartości właściwości background-clip).

Podana przez nas sekwencja wartości właściwości "background-clip" nie może zawierać wartości globalnych.

Jeżeli podana przez nas sekwencja wartości właściwości "background-clip" będzie zawierała mniejszą liczbę wartości niż liczba obrazków tworzących tło obrazkowe elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "background-clip" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

pierwszy obrazek tworzący tło obrazkowe tego elementu "div" został przycięty do obszaru wyznaczonego przez rozmiar zawartości tego elementu "div", natomiast drugi obrazek tworzący tło obrazkowe tego elementu "div" został przycięty do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div" (kolor tła tego elementu "div" również został przycięty do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div"), ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z następującą sekwencją wartości: "content-box, padding-box"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:url(http://webkod.pl/files/css/obrazek-o1.png), url(http://webkod.pl/files/css/obrazek-o2.png);
        background-repeat:no-repeat, no-repeat;
        background-clip:content-box, padding-box;
        border:15px dashed black;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      pierwszy obrazek tworzący tło obrazkowe tego elementu "div" został przycięty do obszaru wyznaczonego przez rozmiar zawartości tego elementu "div", natomiast drugi obrazek tworzący tło obrazkowe tego elementu "div" został przycięty do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div" (kolor tła tego elementu "div" również został przycięty do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div"), ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z następującą sekwencją wartości: "content-box, padding-box"
    </div>

  </body>
</html>