La funzione url() in CSS è utilizzata per specificare il percorso di un file esterno (immagine, font, ecc.) che viene caricato e utilizzato all'interno di una proprietà CSS. È usata generalmente per inserire immagini di sfondo, font personalizzati, e altre risorse multimediali nelle pagine web.
La sintassi da usare è: proprietà: url(stringa). La stringa è l'URL del file.
La funzione url() può essere utilizzata per le seguenti proprietà CSS:
background e background-image per lo sfondo degli elementi.border e border-image per i bordi degli elementi.content negli pseudo-elementi.cursor per i cursori.list-style per lo stile delle liste.@import per caricare i font nella pagina.La funzione url() richiede l'inserimento di un link. Questo link può essere inserito tra virgolette ("), apici (') o senza alcun simbolo. Non c'è una vera differenza tra i 3. Ecco i vari casi:
background-image: url("https://biadets.com/language/css/img/parrot.jpg");
background-image: url('https://biadets.com/language/css/img/parrot.jpg');
background-image: url(https://biadets.com/language/css/img/parrot.jpg);Vediamo un esempio di utilizzo di url() in cui applichiamo l'immagine di sfondo a un <div>:
div {
background-image: url("https://biadets.com/language/css/img/parrot.jpg");
width: 100px;
height: 100px;
}Possiamo usare url() per modificare il cursore del mouse quando passiamo, ad esempio, sopra questo elemento:
div {
padding: 80px 10px;
cursor: url('https://biadets.com/language/css/img/smile.png');
background-color: AntiqueWhite;
text-align: center;
}Nota: per essere visualizzabile su tutti i browser, l'immagine del cursore deve essere di una dimensione massima di 16x16. Immagini di dimensione superiore potrebbero non essere supportate su tutti i browser.
Puoi utilizzare la funzione url() con la lista delle proprietà CSS che abbiamo elencato all'inizio. Puoi fare riferimento alle singole lezioni per sapere come usare url() (che, in generale, funziona sempre allo stesso modo).