In questa lezione verranno illustrati due nuovi background delle proprietà che utilizziamo per modificare il colore di
sfondo o l'immagine di sfondo di un elemento e di un bordo.
Quindi inizieremo con lo sfondo, come puoi vedere ho un piccolo esempio qui.
Quindi ecco il suo risultato finale.
Si noti che abbiamo uno sfondo grigio sul corpo.
Venendo da qui e poi abbiamo uno sfondo blu sul div che sta venendo da qui.
E poi abbiamo anche il testo bianco sul paragrafo.
Andiamo avanti e proviamo usando la pagina About Me con cui abbiamo lavorato.
Andiamo avanti e cambia i miei hobby h avanti e dargli un colore di sfondo.
Diamogli un colore arancione.
Quindi, di nuovo, vogliamo selezionare questa età, quindi digitiamo quattro anni.
E poi all'interno delle parentesi graffe dirai sfondo e faremo un R G B
e diventeremo di colore arancione.
Quindi saranno un sacco di rossi un po 'verdi e il piccolo blu e rinfresciamo e
otteniamo questo bel colore corallo.
qualcosa che vedi spesso su un sito Web in cui l'intero sfondo è un nuovo colore.
Dopodiché facciamo lo sfondo diamo al corpo uno sfondo che è
Quindi facciamo
qualcosa come lo sfondo e diciamo che per essere rosa per ora e poi andiamo tutto
lo sfondo è rosa.
Quindi questa è la proprietà di sfondo utilizzata per cambiare il colore di qualcosa.
Ma possiamo anche usare la proprietà background per cambiare lo sfondo per essere un'immagine che mostra anche
vedere piuttosto spesso.
sfondo, ma invece di un colore ti diciamo Arel e poi tra parentesi ti diamo un dove si trova l'immagine.
Quindi, come funziona, continuiamo a specificare lo
Quindi andiamo a cercare un po 'di venatura del legno troveremo un'immagine come questa qui.
Quindi, copia questa immagine.
Inseriscilo, lo imposteremo come sfondo.
Quindi sul nostro corpo dirò semplicemente che tu Earl e che tu sei Ellett che ho appena copiato.
Quindi questo funzionerà con qualsiasi immagine.
E se ci rinnoviamo alla grande, vediamo che il nostro background è stato impostato, ma noterete una piccola cosa che è che
la nostra immagine non è abbastanza grande.
Se torniamo ad esso non è vicino ad essere abbastanza grande da coprire tutto il nostro corpo qui.
Quindi, quello che è successo è che è stato rafforzato.
Puoi vedere che sai che viene intitolato piastrellato orizzontalmente e verticalmente.
Quindi se non lo vogliamo e qualche volta lo fai ma la maggior parte delle volte non sembra molto bello.
Quindi se non vogliamo che ci sia un'altra proprietà che possiamo impostare e che è una ripetizione in background.
E se lo impostiamo come non ripetere e salvo.
Ora abbiamo impostato lo sfondo del suo corpo e non si ripete.
Ma noterai anche che non si estende per coprire l'intero corpo.
Quindi, se volessimo farlo allungare su tutto lo schermo o su tutto
il corpo, c'è un'altra proprietà che possiamo impostare che è la dimensione dello sfondo e possiamo impostarla per coprire.
Quindi come puoi vedere ora occupa tutto il corpo.
Ovviamente non è la migliore immagine per questo perché è un po 'sfocata è un
po' pixellata ma quando fai un'immagine di sfondo di solito vuoi assicurarti di avere qualcosa che sia grande
e ad alta risoluzione o qualcosa che abbia un'immagine più piccola che può essere ripetuto senza problemi a
differenza di questo.
su entrambi gli assi, quindi se lo ripetiamo è molto chiaro che ci sono divisioni e rivestimenti.
Non lo sai simmetrico
OK.
Questo è lo sfondo e utilizza il colore di sfondo e lo sfondo per impostare un'immagine di sfondo.
La prossima cosa che voglio mostrare è come ottenere un confine.
Quindi, in effetti, mi verrebbe fuori perché è un po 'di distrazione
e torniamo allo sfondo come
rosa e andiamo ad aggiungere bordi a tutti quelli.
Quindi un confine e C S ha tre parti differenti.
C'è il colore e lo stile.
Quindi iniziamo dando un colore di bordo a ciascuno di essi.
Sembra proprio questo colore del bordo e quel bordo.
Andiamo con il viola e se aggiorniamo non vediamo nulla, perché attualmente il nostro
bordo non ha larghezza.
Quindi la prossima cosa che dobbiamo fare è darlo via.
Quindi confinando con esso gli verrà dato un numero in pixel.
Facciamo cinque pixel cinque x aggiorna e ci manca ancora una cosa che è lo stile.
Quindi vedrai che nessuno di questi funziona se non li abbiamo tutti e tre impostati.
Quindi lo stile del bordo ci sono alcune opzioni differenti.
Possiamo dire solido.
Ho tratteggiato un bordo tratteggiato.
Ce ne sono alcuni altri.
La maggior parte delle volte quello che vedi è solo un bordo solido così solido cinque pixel viola.
E otteniamo un confine attorno a tutti quelli H.
C'è una bella scorciatoia e tasse che possiamo usare.
Quindi, poiché spesso impostiamo tutti e tre questi elementi contemporaneamente, esiste la sintassi equivalente che viene chiamata
semplicemente border.
E a destra due punti del bordo lo diamo con 5 pixel lo stile solido e il colore viola.
Quindi posso commentarli e vedrai che non cambierà nulla.
È identico.
Quindi giochiamo un po '.
Andiamo con un Forder da 8 pixel che è solo prendere il nostro R. G. B da quaggiù e abbiamo questo bel
effetto di bordo tratteggiato.
Quindi sai che di solito non l'ho visto.
Non l'ho visto dai siti web negli anni '90, usando sempre stili diversi.
Di solito tutto ciò che vedi è un bel bordo sottile di uno o due pixel.
OK.
Quindi, per ricapitolare il confine, possiamo impostare le proprietà singolarmente oppure possiamo usare le scorciatoie
e le tasse e impostare lo stile e il colore.
Tutto in una volta