---
title: "Zerif Lite: ¿Cómo eliminar la opacidad del fondo?"
url: https://caribdis.net/2015/12/02/zerif-lite-como-eliminar-la-opacidad-del-fondo/
date: 2015-12-02
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "En este quinto tutorial vamos a aprender a manejar la opacidad de la imagen de fondo para la sección de título grande en el tema gratuito Zerif Lite. Puede que..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 279
---

# Zerif Lite: ¿Cómo eliminar la opacidad del fondo?

En este quinto tutorial vamos a aprender a manejar la opacidad de la imagen de fondo para la sección de título grande en el tema gratuito **Zerif Lite**.

[![Zerif Lite - Opacidad](//caribdis.net/wp-content/uploads/2015/12/Zerif-opacity.jpg)](https://caribdis.net/wp-content/uploads/2015/12/Zerif-opacity.jpg)

Puede que no nos guste el efecto de opacidad y queramos que la imagen tenga su contraste original. Para eso tendremos que añadir el siguiente código a la hoja de estilos (el archivo `custom.css`) del tema hijo; las instrucciones para crear un tema hijo se encuentran en [esta entrada anterior](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/):
.header, .header-content-wrap, .contact-us {
    background: rgba(0, 0, 0, 0);
}
Tener en cuenta que este código también suprime el efecto de opacidad en la sección *Contáctenos*.

[![Zerif Lite - Opacidad - Sección "Contáctenos"](//caribdis.net/wp-content/uploads/2015/12/Zerif-opacity-cf.jpg)](https://caribdis.net/wp-content/uploads/2015/12/Zerif-opacity-cf.jpg)

Para conservarlo, simplemente eliminar el selector `.contact-us`.

Si no desea eliminar la opacidad, pero sí atenuarla un poco, puede ajustarla cambiando el valor de la última cifra, a algo así:
.header, .header-content-wrap, .contact-us {
    background: rgba(0, 0, 0, .3);
}
Y si desea aplicar una opacidad de distinto color, cambie los valores **RGB**. Por ejemplo, para un color que coincida con el rojo de los botones, quedaría algo así:
.header, .header-content-wrap, .contact-us {
    background: rgba(233, 102, 86, .3);
}
[![Zerif Lite - Opacidad - Rojo](//caribdis.net/wp-content/uploads/2015/12/Zerif-opacity-red.jpg)](https://caribdis.net/wp-content/uploads/2015/12/Zerif-opacity-red.jpg)

Una herramienta muy útil para cuando trabajamos con colores, es la que nos ofrece el sitio [**HEX to RGB Converter**](http://hex.colorrrs.com/): Aquí podemos insertar los valores hexadecimales correspondientes para un color y convertirlos a valores RGB.

¿Qué pasa si nada más queremos aplicar estilos a **Zerif Lite**, pero sin cambiar nada en los archivos? En este caso, **el tema hijo no es necesario**, ya que a partir de la versión **4.7** WordPress incluye la opción *CSS adicional* en el *Personalizador*, que nos da la posibilidad de pegar los códigos necesarios en el recuadro correspondiente y ver los cambios en el momento. La opción se encuentra al final:

[![](//caribdis.net/wp-content/uploads/2015/12/zerif-wpcss.jpg)](https://caribdis.net/wp-content/uploads/2015/12/zerif-wpcss.jpg)

**Tutorial original en inglés: [How to remove background opacity in Zerif](http://docs.themeisle.com/article/30-removing-background-opacity-in-zerif)**