Hvordan du lager gjentatte billedgrenser i CSS3 - dummies

En av de vanligste bruksområder for gjentatte bilder i CSS3 er å skape grenser laget av bilder. Dessverre virker denne teknikken ikke bra med Internet Explorer 9. Det virker imidlertid med alle nyere versjoner av Chrome, Firefox og Internet Explorer 10. Følgende prosedyre tar SimpleGraphics-eksemplet opprettet tidligere, og legger til en poteutskriftsgrense til det.

1. Åpne SimpleGraphics. HTML-fil.

   Du må endre siden slik at det er nytt for å holde marginen, som egentlig ikke er en del av bildet. Hvis du prøver å legge til marginalgrafikken i den eksisterende bildebeholderen, vises grafikken sentrert på bildebeholderens margin, i stedet for som fulle bilder.

2. Legg til en ny på siden som vist her.

   
   Et bilde av en søt katt!
   
   
   
   
   
   
   
   

3. Endre taggen slik at den ser slik ut:

4. Lagre HTML-filen som BorderGraphics. HTML.

5. Åpne SimpleGraphics. CSS-fil.

   Du må endre stilene slik at de kan fungere med de nye beholderne som finnes i HTML-filen. Tenk på at grensen er en boks som omslutter en boks som holder bildet og bildeteksten. Det du får i stedet for en enkelt bildeboks er en boks i en boks.

6. Legg til en ny #BorderContainer-stil som den som vises her.

   #BorderContainer {border-style: solid; kantbredde: 20px; border-image: url (PawPrint.gif) 25 22 23 fylle runde; polstring: 24px; flyte: venstre; posisjon: absolutt; høyde: 465px; bredde: 440px; venstre: 50%; margin-left: -244px;}
   

   De fleste av disse egenskapene er de samme som de som ble brukt for #ImageContainer-stilen. BorderContainer er nå den ytre beholderen, slik at du plasserer den i stedet for ImageContainer. Det er noen endringer i målinger for å imøtekomme grensen.

   Den største forandringen er tillegg av grensebildeegenskapen. Du oppgir nettadressen til bildet du vil bruke, sammen med innoverforskyvningen av grensebildet, bredden på bildet og bildestarten.

   Fyllingsverdien forteller nettleseren å fylle ut med kopier av bildet, og den runde verdien forteller nettleseren å endre størrelsen på bildet slik at et jevnt antall bilder fyller.

   Å finne tallene for et grensebilde kan være vanskelig og tidkrevende. Heldigvis kan du bruke grensebildegeneratoren til å gjøre jobben for deg. Bare angi plasseringen av grensebildet du vil bruke, og bruk glidebryterne for å finne ut optimalverdier for å plassere bildet rundt en. Du kan kopiere resultatene direkte fra siden til søknaden din.

7. Endre #ImageContainer-stilen slik at den gjenspeiler den nye rollen som en indre beholder.

   #ImageContainer {margin: 20px; høyde: 420px; bredde: 400px; bakgrunnsfarge: Hvit;}
   

8. Lagre CSS-filen som BorderGraphics. CSS.

9. Legg inn BorderGraphics-siden.

   Du ser siden. Legg merke til at grensen grafikken omgir både bildet og bildeteksten.