Codice HTML per una immagine con un bordo trasparente

November 13

Codice HTML per una immagine con un bordo trasparente


Cascading Style Sheets permettono di aggiungere bordi colorati in tutto gli elementi della pagina Web, ad esempio immagini. Alcuni bordi possono essere punteggiato mentre altri possono dare un elemento di un aspetto 3D. Nel progettare la tua pagina, è possibile scegliere qualsiasi colore che ti piace per il bordo di un'immagine compresi trasparente. confini trasparenti possono essere invisibili, ma ancora occupare spazio attorno a un'immagine e possono tornare utili in determinate situazioni di progetto.

Borders un'immagine trasparente

Il modello HTML Document Object definisce diversi attributi utili come margine, padding e border. attributi di confine multipli esistono che possono aiutarvi ad aggiungere bordi alle immagini e altri elementi della pagina Web. Border-style definisce lo stile di un elemento, border-width specifica il suo spessore e border-color imposta il colore dell'elemento. Se si imposta border-style di un'immagine a "none", nessun bordo compare intorno all'immagine. Impostazione di un'immagine border-style a luoghi "trasparenti" un bordo attorno un'immagine e rende il confine invisibile.

Styling Elementi pagina

Aggiungere un bordo trasparente a un'immagine con l'aggiunta di un attributo border-color a un tag img HTML come illustrato di seguito:

<Img style = "background-color: trasparente">

Il Consorzio World Wide Internet consiglia di rimuovere gli attributi di stile in linea da tag ed utilizzando classi CSS per impostare le proprietà degli elementi. In questo modo si rende più facile mantenere le pagine di codice e restyle rapidamente aggiornando le informazioni CSS invece di cambiare gli attributi di stile all'interno di elementi come il tag img.

Le classi CSS

Se non hai mai usato i CSS per gli elementi della pagina Web in stile, si può essere affaccia su un modo semplice per siti web in stile rapidamente. progettisti di siti creano classi CSS e assegnare attributi come il colore e lo stile del bordo per loro. Hanno quindi aggiungere i nomi di classe per i tag HTML come illustrato di seguito:

<Img class = "redBorder" src = "desert.jpg" />

In questo esempio si fa riferimento a una classe CSS di nome redBorder. Quella classe potrebbe avere un attributo che definisce colore del bordo rosso. Se si utilizza questa tecnica, è possibile creare una classe di confine trasparente che rende ogni immagine trasparente.

Modifica immagine Bordi di programmazione

Quando si utilizzano i CSS per aggiungere un bordo a un'immagine, è possibile eseguire questo compito, una volta o fare il confine cambiare in qualsiasi momento ti piace usare JavaScript. Fate un bordo immagine verde trasparente quando un utente fa clic su un pulsante, utilizzare il codice simile a quello riportato di seguito:

. Document.getElementById ( "ImageID") style.borderColor = "trasparente";

Questa istruzione utilizza JavaScript per modificare l'attributo colore del bordo di un'immagine trasparente. Si potrebbe anche sostituire la parola "trasparente" con un altro nome di colore per cambiare il colore del bordo trasparente dell'immagine di un colore a scelta.

considerazioni

e valori "trasparente" "none" possono sembrare essere lo stesso, ma non lo sono. Se di un'immagine border-width è di 30 pixel, per esempio, l'immagine occupa più spazio se il suo stile di bordo è trasparente se non ha un confine a tutti. Regolando la larghezza in pixel dei bordi trasparenti a volte è possibile posizionare le immagini e altri elementi della pagina più precisamente. È inoltre possibile sperimentare con bordi traslucidi. Questi sono i confini che hanno diversi gradi di trasparenza. Cerca su Internet per i tutorial su CSS opacità per conoscere gli attributi di opacità.