Código HTML para una imagen con un borde transparente

Escrito por kevin lee | Traducido por daniela laura arjones
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Código HTML para una imagen con un borde transparente
Los bordes que rodean las imágenes no siempre tienen que ser visibles. (Hemera Technologies/PhotoObjects.net/Getty Images)

Las hojas en estilo cascada te permiten añadir marcos coloridos alrededor de los elementos de las páginas web como imágenes. Algunos bordes pueden estar salpicados, mientras que otros pueden dar a un elemento una apariencia 3D. Cuando diseñas tu página, puedes elegir cualquier color que te guste para el borde, incluyendo una imagen transparente. Los bordes transparentes pueden ser invisibles, pero todavía ocupan espacio en torno a una imagen y pueden ser útiles en situaciones de diseños determinados.

Otras personas están leyendo

Bordes de imagen transparente

El Modelo de objetos de documentos HTML define varios atributos útiles, como el margen, el relleno y el borde. Varios atributos de los bordes existen que pueden ayudarte a añadir bordes a las imágenes y otros elementos de la página Web. El estilo del borde define el estilo de un elemento, el ancho del borde especifica su grosor y el color establece el color del elemento. Si configuras una imagen con estilo del borde en "ninguno", aparece sin bordes alrededor de la imagen. Configura una imagen con estilo del borde en "transparente", coloca un borde alrededor de una imagen y hace el borde invisible.

Elementos de estilo de página

Añade un borde transparente a una imagen mediante la adición de un atributo de color a una etiqueta HTML img como se muestra a continuación:

<img style="background-color:transparent">

El Consorcio World Wide de Internet recomienda eliminar atributos de estilo en línea de las etiquetas HTML y la utilización de clases CSS para definir las propiedades de los elementos. Esto hace que sea más fácil de mantener tu código y restilizar páginas rápidamente actualizando la información de CSS en lugar de cambiar los atributos de estilo dentro de los elementos, como las etiquetas img.

Clases de CSS

Si nunca ha utilizado CSS para elementos de estilo de las páginas web, puedes estar pasando por alto una forma sencilla de estilizar rápidamente los sitios web. Los diseñadores de sitios crean clases CSS y asignan atributos como el color y estilo de borde a ellos. A continuación, añaden los nombres de las clases a las etiquetas HTML, como se muestra a continuación:

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

En este ejemplo se hace referencia a una clase CSS llamada redBorder. Esa clase puede tener un atributo que establece el color del borde de color rojo. Si se utiliza esta técnica, se puede crear una clase Border transparente que hace que cualquier imagen sea transparente.

Cambio de bordes de la imagen mediante programación

Cuando utilizas CSS para agregar un borde a la imagen, puedes realizar esta tarea una vez o cambiar el borde en cualquier momento usando JavaScript. Haces un borde verde transparente cuando un usuario hace clic en un botón, utilizando un código similar al que se muestra a continuación:

document.getElementById ("ImageId") style.borderColor = "transparent".;

Esta instrucción utiliza JavaScript para cambiar el atributo del color de borde a transparente. También puedes sustituir la palabra "transparente" con otro nombre de color para cambiar el color del borde transparente a un color de tu elección.

Consideraciones

Los valores "transparent" y "none" pueden parecer lo mismo, pero no lo son. Si una imagen de ancho de borde es de 30 píxeles, por ejemplo, la imagen ocupa más espacio si su estilo de borde es transparente, que si no tiene borde alguno. Mediante el ajuste de la anchura de píxeles de bordes transparentes a veces se pueden colocar imágenes y otros elementos de página con más precisión. También puedes experimentar con bordes translúcidos. Estos son bordes que tienen diferentes grados de transparencia. Busca en la Internet los tutoriales de CSS sobre opacidad para aprender acerca de los atributos de opacidad.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles