改变背景图像的亮度？

Question

我想知道是否有可能改变亮度:

 body{
 background-image:url();
 }

使用HTML/CSS.我想改变它的原因是因为我花了相当长的时间制作图像,但是当我把它放在网站上时,它突然变成了两倍的亮度.我比较了原始文件和输入到网站的文件,它们都是非常不同的蓝色.

这有什么理由,有没有办法可以改变亮度？

谢谢.

Answer 1

这将是一个选项,但它不是很实用,不适用于旧版浏览器:

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

或者为了更好的颜色控制,尝试hsla()颜色:

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

实际上,最好在图像编辑器中使用图像,直到获得所需的浏览器结果.

Answer 2

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

这将使50%的白色覆盖原始图像.

必须使用线性渐变功能,否则它不起作用.

或者您可以使用:

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

这对代码可维护性更好.

Answer 3

没有办法在每个浏览器中都能运行,但如果您愿意,可以使用以下filter样式在webkit浏览器(Chrome,Safari,Opera)中执行此操作:

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

这导致webkit浏览器中的亮度降低到80%.如果你想这样做,我建议你只保存另一个版本的图像.