改变背景图像的亮度? [英] Change brightness of background-image?

问题描述

我想知道是否可以改变以下的亮度:

I am wondering if it is possible to change the brightness of:

 body{
 background-image:url();
 }

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

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.

这有什么原因吗?有什么办法可以改变亮度吗?

Is there any reason for this, and is there a way I can change the brightness?

谢谢.

推荐答案

这是一个选项，但不是很实用，并且在旧版浏览器中无法使用:

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;
}

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

Or for even better color control, try hsla() colors:

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.

这篇关于改变背景图像的亮度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！