Ostatnio edytowany:

url()

Autor: Virtual Patriot

Przeznaczenie funkcji url()

Za pomocą funkcji url() możemy wskazać dla przeglądarki internetowej adres interesującego nas obrazka.

Parametry funkcji url()

Przykładowe zapisy

url(http://webkod.pl/obrazek-1.png)

url('http://webkod.pl/obrazek-1.png')

url("http://webkod.pl/obrazek-1.png")

url(../img/obrazek-1.png)

address

Parametr address jest wymaganym parametrem funkcji url(). Parametr address określa adres obrazka.

Dostępne wartości

ciąg znaków w formie adresu URL

Sposób podawania

wybrany adres URL można podać (lecz w tym wypadku nie jest to wymagane) pomiędzy pojedynczym lub podwójnym cudzysłowem

Wartość domyślna

brak

Właściwości CSS dla funkcji url()

  1. border-image-source
  2. background-image
  3. box-reflect
  4. mask-image
  5. list-style-image
  6. content
  7. shape-outside
  8. cursor

Przykład funkcji url()

  background-image:url(http://webkod.pl/files/css/obrazek-01.png);
do obszaru tła tego elementu "div" został dodany obrazek znajdujący się pod adresem "http://webkod.pl/files/css/obrazek-01.png", ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "http://webkod.pl/files/css/obrazek-01.png"

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-01.png);
        background-repeat:no-repeat;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      do obszaru tła tego elementu "div" został dodany obrazek znajdujący się pod adresem "http://webkod.pl/files/css/obrazek-01.png", ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "http://webkod.pl/files/css/obrazek-01.png"
    </div>

  </body>
</html>

Interpretacja funkcji url()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak