Cómo incluir imágenes externas desde una ubicación remota con CSS

Con hojas de estilo en cascada (CSS), se puede incluir una imagen de fuera de su sitio Web en una de sus páginas. Las tres formas de dar un atributos de elementos en CSS son estilos en línea, hojas de estilo internas y hojas de estilo externas. Siga estos pasos para incluir imágenes externas desde una ubicación remota con CSS.

Instrucciones

En línea Estilos

1

Encuentra el código para el elemento que desea colocar una imagen. En este caso, es

. 2

Inserte el siguiente código entre el final de la etiqueta de apertura del elemento y el corchete de cierre:

style = "background-image: url (IMAGE_URL); anchura: X px; altura: Y px;"

Dónde IMAGE_URL es la URL de su imagen a distancia, X es el ancho de la imagen en píxeles e Y es la altura. Así, en nuestro ejemplo, nuestra div se convertiría en:

<div style = &quot;url(http://www.fake.com/images/fake.gif); width: 30px; height: 30px;&quot;></div>

Hoja de estilo interna

3

Encuentra la etiqueta del código de su página Web. Debe ser hacia la parte superior del código.

4

Mueva la etiqueta de una línea hacia abajo. Si la etiqueta se encuentra en una línea con otro código, moverla a su propia línea, y luego moverlo hacia abajo uno más.

5

Inserte el siguiente código en la línea por encima de la etiqueta:

6

Inserte el siguiente código entre el final de la etiqueta de apertura del elemento y el corchete de cierre:

class = "bri"

Así, en nuestro ejemplo, nuestra div se convertiría

<div class = &quot;bri&quot;></div>

Consejos y advertencias

  • Utilice hojas de estilo internas para llenar una serie de elementos con la misma imagen. En este caso, le daría la clase = atributo "bri" a cada elemento que querías lleno. De esta manera, usted puede agregar otras etiquetas CSS a los elementos de clase "bri" sin cambiar en cada elemento, justo en la parte superior de su documento.
  • Puede utilizar hojas de estilo externas, poniendo el código desde el interior de la hoja interna (es decir, las etiquetas) en un documento separado. Entonces, en vez de poner esas etiquetas antes de su etiqueta, puso: Usted puede poner esto donde FILENAME.css es el nombre del nuevo archivo de hoja. Esto le permite utilizar la misma hoja para un número de páginas, que es grande si usted desea utilizar los mismos estilos en todas sus páginas.
  • Cuando se muestra una imagen remota en su página, los espectadores serán descargándolo de la ubicación remota. Esto va a comer el ancho de banda de ese lugar remoto. Otros webmasters pueden no tomar amablemente a este; podrían cortarte fuera de incluir imágenes de su dominio, o pueden quejarse a su anfitrión web acerca de su abuso de sus imágenes. Obtener permiso primero.