¿Cómo añadir fondos transparentes en Blogger?:
Para ello necesitas conocer la class o id a la cual le asignarás la opacidad. Utilizaré como ejemplo los posts (Entradas).
La clase que define una entrada corresponde a ''post''. Como es una clase y no un ID con el que se trabaja, la sintaxis CSS es la siguiente:
.post {Cuando hayas encontrado el valor .post en tu plantilla procederemos a añadir el color de fondo y el nivel de transparencia de la siguiente forma:
atributos css
}
background-color: rgba(63, 72, 204, 0.5)
Explicación:
- El primer valor (63) corresponde a rojo.
- El segundo valor (72) corresponde a verde.
- El tercer valor (204) corresponde a azul.
- El cuarto valor (0,5) corresponde al porcentaje de transparencia del fondo.
.post {
background-color: rgba(63, 72, 204, 0.5);
otros atributos de las entradas
}
Recuerda que se puede utilizar para lo que desees, yo lo utilicé en las entradas para tener un ejemplo con el cual trabajar.
MÁS EFECTOS
.post {
color:#000000;
padding:4px 18px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
}
Edita el valor 8 resaltado en color verde por una cifra superior o inferior para añadir menos o más opacidad -respectivamente- a las entradas. Ten en cuenta que no debes incluir un valor que sobrepase el 9 o que sea inferior al 1.
Para añadir una imagen o un color de fondo al post, utiliza el atributo background bajo .post { tal y como se muestra a continuación:
.post {
background:url("URL DE LA IMAGEN") no-repeat scroll 0 0 transparent;
Reemplaza URL DE LA IMAGEN por la dirección de la imagen.
Utiliza esta otra línea en caso de querer el fondo en color:
background:#cccccc;
#cccccc es el código del color escogido. Edítalo a tu gusto accediendo a la tabla de colores.
Guarda la plantilla y comprueba el resultado en varios navegadores para asegurarte que la opacidad se aprecia bien.