August 13
La parola chiave repeat-y dei fogli di stile CSS, o CSS, dice il browser web per creare il maggior numero di copie di un'immagine di sfondo come sono necessari per riempire l'altezza di un elemento HTML. I problemi possono sorgere se non si usa la sintassi corretta per repeat-y, o omette gli altri ingredienti necessari per creare l'immagine di sfondo ripetuta. Esso contribuisce a creare una pagina Web semplice utilizzando repeat-y per richiamare gli elementi essenziali del verticalmente ripetono sfondi con i CSS.
Se non riesci a vedere una ripetizione immagine di sfondo in verticale, può essere perché hai utilizzato la sintassi sbagliata per la parola repeat-y, o la definizione di stile che utilizza la parola chiave. Considerate questa definizione CSS di esempio che utilizza repeat-y. Si noti ogni carattere nel testo della dichiarazione. Le parentesi indicano l'inizio e la fine di una definizione di stile. Le parole chiave "Background" dicono interprete CSS del browser per eseguire un'operazione stile. La porzione di "URL" ha inizio e fine bretelle e le virgolette per specificare un file di immagine. CSS richiede tutti questi componenti per fare una ripetizione immagine verticalmente. Se uno di questi componenti sono mancanti o non correttamente digitato, l'immagine non si ripeterà.
corpo
{
background-image: url ( 'bground.gif');
background-repeat: repeat-y;
}
Quando stai avendo difficoltà a raggiungere un'immagine di ripetere in verticale sullo sfondo di un paragrafo, div, corpo, o altro elemento HTML, assicurarsi che l'immagine che si desidera ripetere esiste, e che è nella stessa cartella come la pagina Web. La seguente dichiarazione di esempio CSS definisce uno stile utilizzando un'immagine di sfondo verticale ripetizione di un elemento div HTML. Si noti che il percorso per l'immagine include una cartella ipotetica denominata "myimages." Se non si dispone di una tale cartella sul server, o se il file immagine "bground.gif" non è in quella cartella, la ripetizione dell'immagine verticale non funziona. Risolvere il problema facendo in modo i file di cui negli stili che utilizzano repeat-y esistono, e che sono nelle cartelle che le dichiarazioni di ripetizione-y specificano.
div
{
background-image: url ( '.. \ myimages \ bground.gif');
background-repeat: repeat-y;
}
Anche se la tua definizione di stile CSS utilizzando repeat-y può essere privo di errori, il codice HTML errato che si applica tale definizione in modo errato può rendere l'immagine ripetuta non si presentano. La pagina Web estratto che segue mostra una definizione di stile e di un tag di paragrafo HTML. Si noti che il nome dello stile "myStile" che il tag p si riferisce a con il suo attributo class differisce dallo stile "myStyle" nel codice CSS, di un carattere. Questa differenza nei nomi significa che il tag p non mostrerà lo sfondo ripetuto come il programmatore previsto. Per risolvere questo problema, il programmatore può correggere l'errore di battitura attributo di classe del tag di paragrafo.
<Style type = "text / css">
p.myStyle
{
background-image: url ( 'bground.gif');
background-repeat: repeat-y;
}
</ Style>
</ Head>
<Body>
<P class = "myStile"> Alcuni di testo. </ P>
</ Body>
Se stai cercando di ripetere verticalmente un'immagine in un elemento la cui altezza è più piccolo di due copie sovrapposti di l'immagine, l'immagine di ripetizione repeat-y non funziona. Per esempio, se si sta cercando di applicare uno stile repeat-y per un relativamente piccolo elemento della pagina come un paragrafo, è probabile che non si vedrà una qualsiasi immagine a tutti. La ragione è che l'altezza di un paragrafo è quasi sempre più piccolo di altezza di un'immagine, a meno che l'immagine è molto piccolo. È possibile eliminare questo ostacolo utilizzando la parola chiave CSS altezza per specificare una maggiore altezza per l'elemento. Nel brano che segue, uno stile CSS per un elemento paragrafo stabilisce l'altezza di quel elemento di una dimensione relativamente grande. L'altezza può consentire l'effetto repeat-y al lavoro.
P.myStyle
{
altezza: 300px;
background-image: url ( 'bground.gif');
background-repeat: repeat-y;
}