Modifier la luminosité de l'image de fond d'écran?

Je me demande si il est possible de modifier la luminosité de:

 body{
 background-image:url();
 }

À l'aide de HTML/CSS. La raison pour laquelle je voudrais le changer, c'est parce que j'ai passé un assez long temps de prise de l'image, mais quand je l'ai mis sur le site web, il est tout à coup près de deux fois plus lumineux. J'ai comparé le fichier original et le fichier de saisie sur le site et ils sont tous les deux très beaucoup de différentes couleurs de bleu.

Est-il une raison pour cela, et est-il un moyen pour que je puisse changer la luminosité?

Grâce.

non, vous ne pouvez pas. enregistrer l'image dans la luminosité dont vous avez besoin....
hsivonen.fi/png-gamma
Je ne pense pas que vous lisez l'intégralité de chose Gert B, j'ai fait enregistrer l'image dans la luminosité dont j'ai besoin, et le fichier d'origine est parfait, mais dès que je l'ai mis sur le site web, il va tout d'un coup deux fois plus brillant, ou de, deux fois la luminosité de la teinte de bleu.

OriginalL'auteur user3227878 | 2014-01-26

  1. 17

    Ce serait une option, mais il n'est pas très pratique et ne fonctionne pas dans les navigateurs plus anciens:

    body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

    Ou pour encore plus de contrôle de la couleur, essayez hsla() couleurs:

    body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

    Vraiment, c'est mieux de jouer avec l'image dans un éditeur d'image jusqu'à ce que vous obtenez le navigateur résultat que vous souhaitez.

    simple et de génie! merci!!!!
    Utile à lire ici: w3schools.com/colors/colors_hsl.asp

    OriginalL'auteur ralph.m

  2. 6
    background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png);

    Cela permettra de mettre 50% de blanc au-dessus de l'image d'origine.

    Linear-gradient de la fonction doit être utilisée, sinon ça ne marche pas.

    Ou vous pouvez utiliser:

    .someObj:after{ content:''; background:rgba(255,255,255,.5); .... }

    ce qui est mieux pour la maintenabilité du code.

    C'est une belle solution qui fonctionne très bien sur parallex défilement des récipients avec de l': background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png);

    OriginalL'auteur Martin Zvarík

  3. 5

    Il n'y a aucun moyen de le faire ce qui fonctionne dans tous les navigateurs, mais si vous voulez, vous pouvez le faire dans les navigateurs webkit (Chrome, Safari, Opera), en utilisant la filter style:

    img.lessBright {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

    Que les résultats de la luminosité être réduite de 80% dans les navigateurs webkit. Je ne recommande juste de sauver une autre version de votre image, si vous voulez faire cela.

    Mais cela diminue la luminosité de l'ensemble de l'élément, y compris le texte et la bordure.... il est préférable d'utiliser l'opacité() ou quelque chose d'autre.
    L'opacité n'est pas nécessairement égayer, il permet simplement à l'arrière-plan de briller à travers. Pour l'opacité de montrer un effet similaire, vous devez vous assurer que le parent de l'élément a un fond blanc. L'application de background:white à l'image de ne pas le faire, puisque l'arrière-plan aura également une opacité de la même valeur pour l'arrière-plan.

    OriginalL'auteur Joeytje50

  4. 0

    J'ai eu le même problème, mais c'est avec un Gif.

    Ma solution:

    J'ai fait un très petit carré noir à la place de l'image dans PowerPoint et définissez sa transparence à 50% et enregistré comme un fichier appelé "dimmerswitch.png"

    Que j'ai référencé en premier dans le code:

    body {
background-image:url("dimmerswitch.png"), url("YourImage.png");
}

    OriginalL'auteur Floppsy

  5. -4

    Vous venez de le faire Photoshop pour réduire la luminosité si il n'y a pas d'autre moyen.

    Donc, si votre réponse est comprise comme : "photoshop pour les images. Oublier de trouver une règle CSS pour elle"... ?! d'Accord... Peut-être une réponse.

    OriginalL'auteur Taran Deep Singh