Html 更改背景图像的亮度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21363283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change brightness of background-image?
提问by user3227878
I am wondering if it is possible to change the brightness of:
我想知道是否可以更改以下亮度：
body{
background-image:url();
}
Using HTML/CSS. The reason I would like to change it, is because I just spent a rather long time making the image, but when I put it on website, it is suddenly about twice as bright. I have compared the original file and the file that is input into the website and they are both very much different colours of blue.
使用 HTML/CSS。之所以想改，是因为我刚做图花了很长时间，但是当我把它放在网站上时，它突然亮了两倍。我比较了原始文件和输入到网站中的文件，它们都是非常不同的蓝色。
Is there any reason for this, and is there a way I can change the brightness?
有什么原因吗，有没有办法改变亮度？
Thanks.
谢谢。
采纳答案by ralph.m
This would be an option, but it's not very practical and wouldn't work in older browsers:
这将是一个选项，但它不是很实用，并且在旧浏览器中不起作用：
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,0.1);
pointer-events: none;
}
Or for even better color control, try hsla()colors:
或者为了更好的颜色控制，尝试hsla()颜色：
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla(180,0%,50%,0.25);
pointer-events: none;
}
Really, it's better to play with the image in a image editor until you get the browser result you want.
确实，最好在图像编辑器中处理图像，直到获得所需的浏览器结果。
回答by Martin Zvarík
background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png);
This will put 50% white over the original image.
这将在原始图像上放置 50% 的白色。
Linear-gradient function has to be used, otherwise it doesn't work.
必须使用线性梯度函数，否则不起作用。
Or you can use:
或者你可以使用：
.someObj:after{ content:''; background:rgba(255,255,255,.5); .... }
.someObj:after{ content:''; background:rgba(255,255,255,.5); .... }
and this is better for code maintainability.
这有利于代码的可维护性。
回答by Joeytje50
There is no way to do this that works in every browser, but if you want, you can do it in webkit browsers (Chrome, Safari, Opera), by using the filterstyle:
没有办法在所有浏览器中执行此操作，但如果您愿意，可以使用以下filter样式在 webkit 浏览器（Chrome、Safari、Opera）中执行此操作：
img.lessBright {
-webkit-filter: brightness(0.8);
filter: brightness(0.8);
}
That results in the brightness being reduced to 80% in webkit browsers. I do recommend just saving another version of your image if you want to do this though.
这导致 webkit 浏览器中的亮度降低到 80%。如果您想这样做，我建议您只保存另一个版本的图像。
回答by Invariant Change
An update to the other answer.
另一个答案的更新。
You can also use the Backdrop Filterfor a much better effect. It can use any filter, in this case, the brightness filter.
您还可以使用背景滤镜以获得更好的效果。它可以使用任何filter，在这种情况下，brightness filter.
This means your background will not be washed-out with a colour over the top, rather it will affect the background directly for a sharper more natural look while retaining all detail.
这意味着您的背景不会因顶部的颜色而褪色，而是会直接影响背景以获得更清晰、更自然的外观，同时保留所有细节。
The downside, it isn't currently supported in Firefox, unless experimental settings are turned on. But that should change soon and as of writing this, Firefox is only 6.5% of the market.
不利的一面是，它目前在 Firefox 中不受支持，除非开启了实验设置。但这应该很快就会改变，在撰写本文时，Firefox 仅占市场的 6.5%。
however, it is fully supported in Chrome
但是，Chrome 完全支持它
body {
content: "";
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: brightness(120%);
pointer-events: none;
}回答by Floppsy
I had the same problem, but it was with a Gif.
我有同样的问题，但它是一个 Gif。
My workaround:
我的解决方法：
I made a very small black square image in PowerPoint and set its transparency to 50% and saved it as a file called "dimmerswitch.png"
我在 PowerPoint 中制作了一个非常小的黑色方形图像并将其透明度设置为 50% 并将其保存为名为“dimmerswitch.png”的文件
Than I referenced that one first in the code:
比我在代码中首先引用了那个：
body {
background-image:url("dimmerswitch.png"), url("YourImage.png");
}
回答by Taran Deep Singh
You just do Photoshop to reduce the brightness if there's no other way.
如果没有其他方法，您只需使用 Photoshop 来降低亮度。
