X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Premium Accesso libero

Accedere alla nostra libreria di articoli Hub Premium, file di progetto e il primo 10% di ogni tutorial-video dalla libreria di tutorial online .

Crea un account gratuito ora!

Impostazione Sfondi Tiled Usando i CSS
Tradotto da Google Translate

Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are some additional properties that we can make use of to further control our backgrounds. Let's check it out!

Fase 1

Prima cosa primo - abbiamo bisogno di un grafico per piastrelle! Probabilmente il posto migliore per farlo è in Photoshop . È possibile utilizzare un grafico ammorbidito, in modo che ci appaiono come una filigrana, un logo, o realmente nulla che vorresti. Assicurarsi che la grafica non è troppo grande, e salvarlo come PNG, JPEG o GIF. Ora siamo pronti a usarlo nel nostro layout.

Fase 2

Quindi, faremo caricare l'immagine nel nostro aspetto attraverso i CSS. Questo ci richiede un po 'di codifica manuale, ma non è nulla di troppo difficile da tirare fuori. In primo luogo, trovare la regola CSS che si desidera applicare lo sfondo grafico. Questo potrebbe essere un selettore ID che controlla un elemento div, una regola di classe, o di qualsiasi altra regola potrebbe essere in uso. Nel mio esempio, ho intenzione di applicare una immagine di sfondo ad un elemento del corpo ridefinito.

Aggiungi nella proprietà "background-image", seguita da una completa e virgola, poi "url". Poi tra parentesi, digitare il percorso della grafica, seguito da un punto e virgola. Per esempio, ecco come il mio codice è:

background-image: url (immagini / background.png);

Si noti che il mio grafico, "background.png" si trova all'interno di una cartella chiamata "immagini". Assicurarsi di salvare i file e visualizzare in anteprima il vostro lavoro nel tuo browser. Notate come le piastrelle immagine di sfondo di default. Potremmo lasciare le cose come sono, o continuare a personalizzare ulteriormente le cose utilizzando ulteriori proprietà CSS.

Fase 3

Se si desidera controllare il comportamento piastrelle, è possibile aggiungere nella proprietà "background-repeat". È quindi possibile impostare il valore "repeat", "repeat-x", "repeat-y", o "no-repeat". Repeat-x e repeat-y forza piastrelle solo orizzontalmente o verticalmente, mentre i no-repeat non consente piastrelle.

Fase 4

Another option that we have available is the ability to control the horizontal and vertical positioning of a non-tiling background image. Try adding in the "background-position" property, followed by two pixel values. The first pixel value is the graphic's horizontal position, and the second, its vertical position.


As you can see, CSS makes it super-easy to control background images. The fun part is coming up with cool graphics and seeing what's possible. Try experimenting with different tiled images, gradients, and patterns. Have fun!

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link