Problemer med Repeat-Y i CSS
Den gjenta-y søkeord for gripende stilark, eller CSS, forteller nettleseren til å lage så mange kopier av et bakgrunnsbilde som er nødvendig for å fylle høyden på et HTML-element. Problemer kan oppstå hvis du ikke bruker riktig syntaks for repeat-y, eller utelate de andre ingrediensene som trengs for å skape den gjentagende bakgrunnsbilde. Det hjelper å lage en enkel webside ved hjelp repeat-y for å minnes de essensielle elementer av vertikalt gjentatte bakgrunner med CSS.
syntax
Hvis du ikke ser et bakgrunnsbilde gjenta vertikalt, kan det være fordi du har brukt feil syntaks for repeat-y søkeord, eller stilen definisjon som bruker søkeordet. Tenk på dette utvalget CSS definisjonen som bruker repeat-y. Legg merke til hvert tegn i setningen tekst. Bukseseler indikere starten og slutten av en stildefinisjon. "Bakgrunn" søkeord fortelle nettleseren CSS tolk for å utføre en stil operasjon. Den "url" delen har begynner og slutter bukseseler og anførselstegn for å angi en bildefil. CSS krever alle disse komponentene for å lage et bilde gjenta vertikalt. Hvis noen av disse komponentene mangler eller feil skrevet, vil bildet ikke gjenta.
kropp
{
background-image: url ( 'bground.gif');
background-repeat: repeat-y;
}
Feil bane eller filnavn
Når du har problemer med å få et bilde til å gjenta vertikalt i bakgrunnen av et avsnitt, div, kropp, eller annen HTML-element, sørg for at det bildet du ønsker å gjenta eksisterer, og at det er i samme mappe som websiden. Følgende eksempel CSS uttalelse definerer en stil ved hjelp av et vertikalt gjenta bakgrunnsbilde av en HTML div element. Legg merke til at stien til bildet inneholder en hypotetisk mappe som heter "myImages." Hvis du ikke har en slik mappe på serveren din, eller hvis "bground.gif" bildefil er ikke i den mappen, den vertikale bilde repetisjon vil ikke fungere. Løs problemet ved å sørge for at filene som er nevnt i stiler som bruker repeat-y eksisterer, og er i mappene gjenta-y uttalelser angir.
div
{
background-image: url ( '.. \ myImages \ bground.gif');
background-repeat: repeat-y;
}
riktig HTML
Selv om din CSS style definisjon bruker repeat-y kan være fri for feil, feil HTML-kode som gjelder denne definisjonen feil kan gjøre det gjentatte bildet uteblir. Websiden utdrag som følger viser en stildefinisjon og en HTML avsnitt tag. Legg merke til at "myStile" style navn at p-taggen refererer til med sin klasse attributt er forskjellig fra "MyStyle" stil i CSS-koden, med en karakter. Denne forskjellen i navnene betyr at p-koden vil ikke vise den gjentagende bakgrunn som programmerer ment. For å løse dette problemet, kan programmereren fikse skrivefeil i avsnittet tag sin klasse attributt.
<Style type = "text / css">
p.myStyle
{
background-image: url ( 'bground.gif');
background-repeat: repeat-y;
}
</ Style>
</ Head>
<Body>
<P class = "myStile"> Noe tekst. </ P>
</ Body>
Størrelse
Hvis du prøver å vertikalt gjenta et bilde i et element hvis høyde er mindre enn to stablet kopier av bildet, vil gjenta-y bilde repetisjon ikke fungere. For eksempel, hvis du prøver å bruke en repeat-y stil til en relativt liten sideelement som et avsnitt, sjansene er at du ikke vil se noe bilde i det hele tatt. Årsaken er at et avsnitt høyde er nesten alltid mindre enn et bilde høyde, med mindre bildet er liten. Du kan fjerne denne hindringen ved hjelp av CSS Høyde nøkkelord for å angi en større høyde for elementet. I følgende utdrag, et CSS stil for et avsnitt element setter som element høyde for en relativt stor dimensjon. Høyden kan tillate repeat-y effekt å arbeide.
P.myStyle
{
height: 300px;
background-image: url ( 'bground.gif');
background-repeat: repeat-y;
}