Como deixar o rodapé transparente?

[Karine Serafim]

Olá, estou com dificuldade em deixar o rodapé do meu site com um pouco de tranparência, apenas para aparecer um pouco a imagem de fundo.

Este é o código do rodapé

 

.footer-black {
    background: #232323;
        /* FF3.6+ */
    background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#585858),color-stop(100%,#232323));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center,ellipse cover,#585858 0%,#232323 100%);
    /* Chrome10+,Safari5.1+ */
    /* Opera 12+ */
    /* IE10+ */
    background: -webkit-radial-gradient(center ellipse,#585858 0%,#232323 100%);
    background: radial-gradient(ellipse at center,#585858 0%,#232323 100%);
    /* W3C */
    background-size: 550% 450%;

 

Agradeço imensamente

[DiF]

@Karine Serafim Olá,  Seja bem vinda em nosso Clube do Hardware.

 

Se eu entendi bem, você que deixar a cor de fundo transparente mas ainda com cor.. é isso?

Existe um tipo de declaração de cores que é o RGBA.  que significa:  Red, Green, Blue e Alfa.

 

O alfa refere-se a opacidade da cor. 

Ele vai de zero a 1, sendo que zero é totalmente transparente e  1 totalmente opaco.  

Neste meio termo você pode usar números com casas decimais.

 

O primeiro passo é descobrir o código rgb da sua cor de fundo. No caso ela está em Hexadecimal como #232323

 

 

Em RGB fica:  rgb(35, 35, 35)

 

Com isso, você pode acrescentar o "A" no final e mais um valor:  rgba(35,35,35, 0.5)

Assim ele será meio transparente a ponto de ver a imagem.

 

exemplo prático: https://jsfiddle.net/dife/a2h716c5/1/

 

 

 

[Karine Serafim]

Olá! 

Agradeço imensamente sua resposta.

Então eu substituo a cor hexadecimal por rgb é isso e coloco 0,x no fim?

Só pra confirmar.

 

Um abraço

[DiF]

2 horas atrás, Karine Serafim disse:

Então eu substituo a cor hexadecimal por rgb é isso e coloco 0,x no fim?

Olá!

Quase isso!

Eu dei 2 exemplos ali.

Você deve usar o rgba(), onde o A no final é de alpha.

 

Vamos rever o que disse mais acima:

Em 19/04/2017 às 15:56, DiF disse:

O primeiro passo é descobrir o código rgb da sua cor de fundo

Descobrir o código rgb() equivalente ao hexadecimal é o primeiro passo.

 

Feito isto, para que a transparência funcione, é preciso usar o canal alfa na função rgb, ou seja, usar a função rgba() ao invés da rgb()

 

passo 1 : Tenho a cor #232323 

passo 2: Quero saber o código em rgb(), para isso, o google ajuda. basta colocar a seguinte tag na busca do google:  #232323  (ver a imagem em anexo)

 

Passo 3: Quero aplicar a transparência. Pega-se a cor em rgb() e acrescenta o A no final da função e acrescenta-se um quarto parâmetro que é a transparência.

 

Ficando assim:  rgba(35,35,35, 0.5)

 

Para ficar melhor de entender posso dizer assim:  

rgba(valor do vermelho, valor do verde, valor do azul, grau de transparência)

 

Um detalhe é que o valor do grau de transparência vai de 0 a 1.

Isso quer dizer que: o zero é o grau invisível ou totalmente transparente e o 1 é o grau máximo totalmente opaco, visível.

• 0
• 0.1
• 0.2 
• 0.3
• 0.4
• 0.5
• 0.6
• 0.7
• 0.8
• 0.9
• 1

 

PS: no meu post anterior havia dito que era de 0 a 9, foi um equívoco que me dei conta só agora.

Acabei de arrumar o post anterior.

 

Acho que  agora deixei mais claro. A transparência só funciona se e somente se você usar a função RGBA como cor de fundo do elemento!