Código HTML para una imagen con un borde transparente

November 6

Cascading Style Sheets le permiten agregar bordes de colores alrededor de los elementos de las páginas web como imágenes. Algunas de las fronteras pueden ser salpicadas mientras que otros pueden dar a un elemento de una apariencia 3D. En el diseño de su página, usted puede elegir cualquier color que te gusta de la frontera de una imagen incluida transparente. bordes transparentes pueden ser invisibles, pero todavía ocupan espacio alrededor de una imagen y puede ser útil en determinadas situaciones de diseño.

Bordes de la imagen transparentes

El modelo de objetos de documento HTML define varios atributos útiles, como el margen, el relleno y el borde. Existen atributos fronterizas múltiples que pueden ayudarle a añadir bordes a las imágenes y otros elementos de la página Web. Frontera de estilo define el estilo de un elemento, border-width especifica su espesor y border-color establece el color del elemento. Si configura-estilo de borde de una imagen a "ninguno", sin borde aparece alrededor de la imagen. Configuración de una imagen de estilo frontera a lugares "transparentes" un borde alrededor de una imagen y hace que la frontera invisible.

Styling Elementos de página

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

El Consorcio de la World Wide Web recomienda eliminar los atributos de estilo en línea de etiquetas HTML y el uso de clases CSS para establecer las propiedades de los elementos. Hacer esto hace que sea más fácil de mantener sus páginas de códigos y cambiar el estilo de forma rápida mediante la actualización de la información de CSS en lugar de cambiar los atributos de estilo en el interior de elementos tales como etiquetas img.

Las clases CSS

Si usted nunca ha usado CSS para elementos de la página Web de estilo, es posible que con vistas a una forma sencilla de sitios web de estilo rápidamente. los diseñadores de sitios crean clases CSS y asignar atributos tales como el color y el estilo de borde a ellos. A continuación, añadir los nombres de las clases a las etiquetas HTML, como se muestra a continuación:

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

Cambio de los bordes mediante programación

Cuando se utiliza CSS para agregar un borde a la imagen, se puede realizar esa tarea una vez o hacer que cambie la frontera siempre que lo desee utilizando JavaScript. Haces un borde de la imagen transparente de color verde cuando un usuario hace clic en un botón, utilice código similar a la mostrada a continuación:

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

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

consideraciones

y los valores "transparentes" "ninguno" pueden parecer lo mismo, pero no lo son. Si border-width de una imagen es de 30 píxeles, por ejemplo, la imagen ocupa más espacio si su estilo de borde es transparente que si no tiene una frontera en absoluto. Mediante el ajuste de la anchura de píxeles de bordes transparentes a veces se puede posicionar las imágenes y otros elementos de la página con mayor precisión. También puede experimentar con bordes translúcidos. Estas son las fronteras que tienen diferentes grados de transparencia. Buscar en la Internet para las clases particulares de opacidad CSS para aprender acerca de los atributos de opacidad.