CSS como usar propriedade opacity em html-background no css

[Cordas]

Eu tenho uma dúvida que já tive outra vez e não achei uma solução dentro desse aspecto.

Tenho um html e um css.

Não tenho divs.

Eu coloquei um background pelo css:

 

html{
  background: url("../images/html.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

A imagem não importa. Poderia ser qualquer outra. Agora, como eu faço para mudar a opacidade se eu não criei um div no html para dispor o endereço da imagem?

Se eu uso "background-image" tb n faz a menor diferença.

Agradeço!!!

[Public2004]

@Cordas Boas, segue exemplo abaixo:

 

html {
  position: relative;
}
html::before {
  background: url("../images/html.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  content: '';
  width: 100vw;
  height: 100vh;
  opacity: 0.5;
}

Pense também na possibilidade de tratar a imagem já com a opacidade desejada, dependendo do tipo de imagem, tamanho, resolução, etc., pode ficar até mais leve para carregá-la.

 

Abs.

[Cordas]

9 horas atrás, Public2004 disse:

@Cordas Boas, segue exemplo abaixo:

 

html {
  position: relative;
}
html::before {
  background: url("../images/html.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  content: '';
  width: 100vw;
  height: 100vh;
  opacity: 0.5;
}

Pense também na possibilidade de tratar a imagem já com a opacidade desejada, dependendo do tipo de imagem, tamanho, resolução, etc., pode ficar até mais leve para carregá-la.

 

Abs.

Ah saquei vou testar ali. É uma imagem de alta resolução para um pequeno projeto. Mais tarde falo se deu certo. Valeu a ajuda!