改变背景图像的亮度？

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％。如果你想这样做，我建议你只保存另一个版本的图片。

Answer 4

另一个答案的更新。

您也可以使用Backdrop Filter获得更好的效果。它可以使用任何filter，在本例中为brightness filter。

这意味着您的背景不会在顶部被洗掉，而是会直接影响背景，从而在保留所有细节的同时更清晰自然。

不利之处是，除非启用了实验性设置，否则当前不是supported in Firefox。但是这种情况很快就会改变，在撰写本文时，Firefox仅占市场的6.5％。

但是，Chrome完全支持它

body {
content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: brightness(120%);
    pointer-events: none;
}

Answer 5

1. 为相同尺寸的背景图像创建子div。
2. 使用RGBA设置子div的背景颜色，其中包括alpha通道（不透明度）。
3. 相应地将不透明度设置为0到1。 1 =不透明，0 =透明，0.5 =半透明

HTML：

<div id="primary_feature">
    <div class="feature"></div>
</div>

CSS：

#primary_feature{
  background-image: url("../assets/images/misc/laptop.png");
}
.feature{
  background:rgba(0,0,0,0.6);
}

Answer 6

我遇到了同样的问题，但它是用Gif。

我的解决方法：

我在PowerPoint中制作了一个非常小的黑色方形图像，并将其透明度设置为50％并将其保存为名为＆＃34; dimmerswitch.png＆＃34;

的文件

比我在代码中首先引用了一个：

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

Answer 7

如果没有别的办法，你只需要用Photoshop来降低亮度。