.
.2. Elija un color de fondo HTML.
Tiene muchos códigos de color HTML para elegir. Para este ejemplo, haremos el color #33475b.
3. Agregue un atributo de estilo a la etiqueta de apertura.
A continuación, agregue el atributo de estilo a la etiqueta de apertura de su elemento. Para este tutorial, solo cambiará el color de fondo de esta tabla específica. El cambio no afectará a ningún otro elemento de la página.
Aquí está el HTML con CSS en línea:
<table style="background-color:#33475b">
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>
Así de simple. Ahora veamos qué hacer si desea establecer el color de fondo de varios elementos en una página.
Cómo cambiar el color de fondo en HTML
Supongamos que establece el color de fondo de toda su página web en un color y desea cambiar el color de fondo de un elemento específico a otro color. La buena noticia es que el proceso para cambiar el color de fondo de un elemento es casi idéntico al proceso para agregarlo.
Puede usar CSS en línea para hacer esto, pero usaremos varios estilos de CSS en el siguiente ejemplo. Veamos este proceso paso a paso.
1. Busque el selector de CSS «cuerpo».
En lugar de agregar este CSS en la etiqueta del cuerpo del archivo HTML, lo agregaremos usando el cuerpo Selección de CSS. Encuéntrelo en el código CSS de su sitio web.
2. Cambia el color de fondo del cuerpo.
A continuación, cambiaremos el color de fondo de toda la página web usando la propiedad background-color.
Aquí está el CSS:
body {
background-color: #DBF9FC;
}
Aquí está el resultado:
Si este fuera el único CSS, todo en la página tendría el mismo fondo azul claro. A continuación, agregaremos CSS en línea para cambiar el color de fondo de la tabla.
3. Agregue CSS en línea para cambiar el color de fondo de elementos específicos.
Si queremos cambiar el color de fondo de la tabla, podemos usar CSS en línea para apuntar a ese único elemento.
Aquí está la etiqueta de apertura con CSS en línea:
<table style="background-color:#33475b">
Aquí está el resultado:
Cómo cambiar el color de fondo de una división
A división es un elemento contenedor que se usa comúnmente para designar diferentes secciones de una página web.
Cambiar el color de fondo de un div es idéntico a cambiar el color de fondo del cuerpo de tu página web.
Por lo general, una página web tendrá muchos divs. En este tutorial, le enseñaremos cómo cambiar solo un div.
Repasemos el proceso paso a paso.
1. Agregue una clase CSS al div que desea cambiar.
Primero, busque el div en su código HTML y agregue una clase a la etiqueta de apertura. Agregar una clase a un elemento le permitirá cambiar solo ese elemento.
Esto es lo que parece:
<div class=”example”>This is a div on a webpage. </div>
2. Agregue el nuevo selector de clase a su código CSS.
A continuación, diríjase a su código CSS y agregue su nuevo selector de clase. Dentro de los paréntesis, incluya la color de fondo propiedad.
Esto es lo que parece:
.example {background-color: ; }
3. Elija un nuevo color de fondo.
A continuación, elija un Color de fondo CSS para su color de fondo propiedad. Elegimos rgb (255, 122, 89).
Así es como se ve ese código:
.example { background-color: rgb(255, 122, 89); }
Aquí está el resultado:
¡Todo listo! Has cambiado el fondo de un div en tu página web.
Cómo agregar transparencia a su color de fondo HTML
Al cambiar el color de fondo en HTML, no está limitado a colores sólidos. Puede cambiar la opacidad y la transparencia para crear efectos visuales interesantes.
Para hacer eso, usarías el opacidad propiedad en CSS.
¿Qué es la propiedad de opacidad de CSS?
El Propiedad de opacidad de CSS se agrega a un elemento HTML (como un div o una tabla) o un atributo CSS (como una clase) para que esos elementos sean parcial o totalmente transparentes. Los valores de esta propiedad oscilan entre 0 y 1, siendo 0 completamente transparente y 1 completamente opaco.
Para este tutorial, usaremos dos botones como ejemplo. Veamos el proceso de agregar transparencia paso a paso.
1. Identifique los elementos HTML que le gustaría hacer transparentes.
Si ya sabe lo que quiere cambiar, continúe y búsquelo en su código HTML.
En este tutorial, tenemos dos Botones Bootstrap uno al lado del otro. Queremos que los visitantes hagan clic en uno, el botón de enviar, y no en el otro, la opción «no, gracias».
Aquí está el HTML:
<button class="btn" type="submit">Submit</button>
<button class="btn" type="submit">No thanks</button>
Queremos disminuir la opacidad de este último para que parezca desactivado y genere menos clics.
Para lograr este resultado, usaremos el CSS opacidad propiedad después de agregar una clase al botón que cambiaremos.
2. Agregue una clase al elemento que le gustaría cambiar.
A continuación, asignaremos una clase CSS adicional al segundo botón para distinguirlo del primero.
Agregaremos la clase btn-secundario al botón que queremos quitar énfasis.
Esto es lo que parece:
<button class="btn" type="submit">Submit</button>
<button class="btn btn-secondary" type="submit">No thanks</button>
3. Agregue el selector de clase a su código CSS y aplique la propiedad de opacidad.
Ahora que ha creado una nueva clase, es hora de agregarla a su código CSS.
Para hacer que el segundo botón sea 40% transparente, usaremos el .btn-secundario selector de clase para aplicar la propiedad de opacidad. Luego, estableceremos el nivel de opacidad en 0.4.
Aquí está el CSS:
.btn-secondary {
opacity: 0.4;
}
Aquí está el resultado:
Es posible que haya notado que no necesitábamos usar la propiedad de color de fondo de CSS porque usamos las clases de modificador predeterminadas de Bootstrap.
Obtenga más información sobre Bootstrap en La guía definitiva para Bootstrap CSS.
Cómo crear un degradado de color de fondo HTML
Para obtener aún más opciones de estilo, puede crear un fondo degradado. Este es un tipo especial de imagen que generalmente muestra un color que cambia gradualmente a otro color en una determinada dirección, como de arriba a abajo, de izquierda a derecha o en diagonal.
Estos se conocen como gradientes lineales. Para crear un degradado lineal, debe especificar al menos dos paradas de color.
Veamos cuatro ejemplos rápidos a continuación.
Tutorial de degradado lineal: de arriba a abajo
Digamos que desea que el color de fondo pase de blanco en la parte superior de la pantalla a azul en la parte inferior.
Utilizando el cuerpo Selector de CSS, aplicará propiedades de estilo únicas al cuerpo de la página web. Esto es lo que parece de principio a fin.
- Paso 1: Encuentra el cuerpo selector en su código CSS.
- Paso 2: Es posible que su cuerpo ya tenga una propiedad de color de fondo. Borra eso. En lugar de usar el color de fondo propiedad, usará la imagen de fondo propiedad.
- Paso 3: Establezca la propiedad en «gradiente lineal» y especifique dos paradas de color entre paréntesis. Aquí está la sintaxis:
body { background-image: linear-gradient(color, color); }
- Etapa 4: A continuación, desea configurar la altura del elemento HTML al 100% para asegurarse de que esta imagen ocupe toda la pantalla.
Todos juntos, aquí está el CSS:
html {
height: 100%;
}
body {
background-image: linear-gradient(#FFFFFF, rgb(255, 122, 89));
}
Aquí está el HTML (incluidas las etiquetas del cuerpo):
<body>
<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the top and transitions to orange at the bottom.</p>
</body>
Aquí está el resultado:
Gradiente lineal: de izquierda a derecha
No se especificó ninguna dirección para el gradiente lineal anterior. Eso es porque de arriba a abajo es la dirección predeterminada.
Si desea especificar otra dirección, la agregará entre paréntesis antes de que el color se detenga.
Aquí está el CSS para el ejemplo anterior, reescrito para que el gradiente quede de izquierda a derecha.
html {
height: 100%;
}
body {
background-image: linear-gradient(to right, #FFFFFF, rgb(255, 122, 89));
}
Aquí está el HTML:
<body>
<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the left and transitions to orange at the right.</p>
</body>
Aquí está el resultado:
Gradiente lineal – Ángulo de 45°
Si quisiera que el degradado fuera en diagonal, podría usar las palabras clave «hacia abajo a la derecha», «hacia abajo a la izquierda», «hacia arriba a la derecha» o «hacia arriba a la izquierda». Si desea tener más control sobre la dirección de su degradado, puede usar ángulos en lugar de palabras clave.
Tenga en cuenta que un valor de 0 grados equivale a la palabra clave «hacia arriba», 90 grados equivale a «hacia la derecha» y 180 grados equivale a «hacia abajo».
Si quisiera que el degradado fuera a la parte superior derecha, por ejemplo, podría establecer la dirección en 45 grados.
Aquí está el CSS:
html {
height: 100%;
}
body {
background-image: linear-gradient(45deg, #FFFFFF, rgb(255, 122, 89));
}
Aquí está el HTML:
<body>
<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the bottom left and transitions to orange at the top right.</p>
</body>
Aquí está el resultado:
Degradado lineal: varias paradas de color
Para crear un degradado lineal, necesita un mínimo de dos paradas de color. Pero no hay un máximo, lo que significa que puedes usar tantos como quieras. A continuación se muestra un ejemplo con cuatro paradas de color.
Aquí está el CSS:
html {
height: 100%;
}
body {
background-image: linear-gradient(to bottom right, #33475b, #0033CC, #FF77CC, rgb(255, 122, 89));
}
Aquí está el HTML:
<body>
<h1>Linear Gradient</h1>
<p>This linear gradient starts as dark blue at the top left and transitions from pink to orange at the bottom right.</p>
</body>
Aquí está el resultado:
Preguntas frecuentes: Cambiar el color de fondo…
