Sådan oprettes gentagne billedgrænser i CSS3 - dummies

En af de mere almindelige anvendelser til gentagne billeder i CSS3 er at skabe grænser af billeder. Desværre virker denne teknik ikke godt med Internet Explorer 9. Det virker imidlertid med alle nyere versioner af Chrome, Firefox og Internet Explorer 10. Følgende procedure tager SimpleGraphics-eksemplet oprettet tidligere og tilføjer en paw-print-grænse til det.

1. Åbn SimpleGraphics. HTML-fil.

   Du skal ændre siden, så der er en ny, der holder marginen, som virkelig ikke er en del af billedet. Hvis du forsøger at vedhæfte marginalgrafik til den eksisterende billedbeholder, vises grafikken centreret på billedbeholderens margen, snarere end som fulde billeder.

2. Tilføj en ny til siden som vist her.

   
   Et billede af en sød kat!
   
   
   
   
   
   
   
   

3. Rediger tagget, så det ser ud som dette:

4. Gem HTML-filen som BorderGraphics. HTML.

5. Åbn SimpleGraphics. CSS-fil.

   Du skal ændre stilen, så de kan fungere sammen med de nye containere, der findes i HTML-filen. Tænk på, at grænsen er en boks, der omslutter en boks, der holder billedet og billedteksten. Hvad du får i stedet for en enkelt billedkasse er en kasse i en kasse.

6. Tilføj en ny #BorderContainer-stil som den her viste.

   #BorderContainer {border-style: solid; grænsebredde: 20px; border-image: url (PawPrint.gif) 25 22 23 udfyldningsrunde; polstring: 24px; flyde: venstre; position: absolut; højde: 465px; bredde: 440px; venstre: 50%; margin-left: -244px;}
   

   De fleste af disse egenskaber er de samme som dem, der oprindeligt blev brugt til #ImageContainer-stilen. BorderContainer er nu den ydre container, så du placerer den i stedet for ImageContainer. Der er nogle ændringer i målinger for at imødekomme grænsens størrelse.

   Den største ændring er tilføjelsen af ​​grænsebilledeegenskaben. Du angiver webadressen for det billede, du vil bruge, sammen med den indadgående forskydning af grænsebilledet, billedets bredde og billedstart.

   Fyldningsværdien fortæller browseren at udfylde med kopier af billedet, og den runde værdi fortæller browseren at ændre størrelsen på billedet, så et ensartet antal billeder fylder.

   Det kan være svært og tidskrævende at finde ud af tallene for et grænsebillede. Heldigvis kan du bruge ramme-generatoren til at gøre arbejdet for dig. Du skal blot angive placeringen af ​​det grænsebillede, du vil bruge, og brug gliderne til at finde ud af optimale værdier for at placere billedet omkring en. Du kan kopiere resultaterne direkte fra siden til din ansøgning.

7. Rediger #ImageContainer-stilen, så den afspejler sin nye rolle som en indre beholder.

   #ImageContainer {margin: 20px; højde: 420px; bredde: 400px; baggrundsfarve: Hvid;}
   

8. Gem CSS-filen som BorderGraphics. CSS.

9. Læg BorderGraphics-siden.

   Du ser siden. Bemærk, at grænsediagrammet omgiver både billedet og dets billedtekst.