Cómo hacer la opacidad del fondo de celda de una tabla

Escrito por foye robinson | Traducido por analia moranchel
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer la opacidad del fondo de celda de una tabla
Opacidad de fondo de celda de tabla. (Abstract transparant blue/black background image by thea walstra from Fotolia.com)

Puedes acceder a la propiedad de fondo de una celda de una tabla con Cascading Style Sheets (CSS u hojas en estilo de cascada). Los navegadores web utilizan el CSS para dar formato al contenido de una página. Una opacidad inferior hace que el fondo de tu celda sea más transparente, mientras que una opacidad superior hace lo contrario. Según W3Schools, Firefox utiliza la propiedad opacity:x para la transparencia, mientras que Internet Explorer utiliza filter:alpha(opacity=x). Debes incluir ambos en el código para que la opacidad pueda funcionar correctamente en ambos navegadores.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu archivo HTML y agrega el siguiente código dentro de la etiqueta de <HEAD> de la página:

    <style type=\"text/css\"> .opacity { background-color: red GO opacity:0.3 GO filter:alpha(opacity=30) GO } </style>

  2. 2

    Reemplaza "red" con un color de fondo de tu elección.

  3. 3

    Cambia "0.3" a un número entre "0.0" a "1.0" para Firefox y cambia "30" a un número entre "0" a "100" para Internet Explorer.

  4. 4

    Asegúrate de utilizar los mismos niveles de opacidad para Firefox e Internet Explorer. Por ejemplo: opacity:0.6 y filter:alpha(opacity=60).

  5. 5

    Añade el siguiente código dentro de la etiqueta <BODY> del archivo HTML al crear la tabla como sigue:

    <table width=\"100%\" border=\"1\"> <tr> <td> </td><td class=\"opacity\">Add your text here</td> </tr> </table>

  6. 6

    Asegúrate de tener el nombre correcto de la clase (class=\"opacity\") en la etiqueta <TD>. Para agregar la opacidad a una celda existente, sustituye la etiqueta de <TD> por la celda existente en tu archivo HTML con lo siguiente: <td class=\"opacity\">Agregar el texto aquí</td>

  7. 7

    Reemplaza "Agregar el texto aquí" con tu contenido.

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