Problemas Css transparentes - html, css

 body{
color:red;
background-image: url("image.jpg");
background: rgba(255,255,255,.85);
}

Este meu código css para semi-transparente. Não está funcionando. Substitui completamente a minha imagem. Então, eu tentei colocar background: rgba(255,255,255,.85); em outra seção como h2 ou p. Funciona bem.

Alguém pode me dizer o que está acontecendo? Obrigado.

Respostas:

1 para resposta № 1

Sua taquigrafia background: propriedade sobrescreve o longhand anterior background-image propriedade.

Faça isso em vez disso:

body {
color: red;
background: rgba(255,255,255,0.85) url("image.jpg");
}

Como alternativa, use duas propriedades de mão longa:

body {
color: red;
background-color: rgba(255,255,255,0.85);
background-image: url("image.jpg");
}

---

0 para resposta № 2

Sua propriedade short-hand de background sobrescreve o background, então você precisa fazer assim:

body{
color:red;
background: url("image.jpg") no-repeat;//now it works which doesn"t support rgba
background: rgba(255,255,255,.85);
}

---

0 para resposta № 3

você também pode obter a imagem transparente usando pseudo elemento. Dê uma olhada em DEMO.

div{
color: red;
height:100%;
width:100%;
}
div:after
{
content: "";
display:block;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
opacity: 0.5;
-moz-opacity: 0.5;
background: url("http://lorempixel.com/700/700/") no-repeat;
}

---

0 para a resposta № 4

@ user3822798 Você não está entendendo corretamente a propriedade de plano de fundo.

Quando você usa

 body{
color:red;
background-image: url("image.jpg");
background: rgba(255,255,255,.85);
}

background propriedade que está em overrides las background-image, assim você vê apenas cor.

Mas como mencionado pelo @Dai se você usa,

body {
color: red;
background-color: rgba(255,255,255,0.85);
background-image: url("image.jpg");
}

Você pode obter imagens e cores ao mesmo tempo, mas como sua imagem está no formato jpeg, ela é opaca e você não pode ver a cor por trás dela.

para vê-lo usar uma pequena imagem de fundo e usar esse código,

body {
color: red;
background-color: rgba(255,255,255,0.85);
background-image: url("image-small.jpg");
background-repeat:no-repeat;
background-position:center center;
}

Você pode ver a cor branca transparente e sua pequena imagem no meio.

Agora minha pergunta é: por que diabos faz tudo isso? Você não pode simplesmente usar um PNG transparente?

Faça um PNG transperant Imagem e use o seguinte código:

body {
color: red;
background:url("image.png");
}

---