改变背景图像的亮度？

Posted 2023-03-05

【中文标题】改变背景图像的亮度？

【英文标题】：Change brightness of background-image?

【发布时间】：2014-02-17 06:05:51

【问题描述】：

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

 body
 background-image:url();
 

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

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

谢谢。

【问题讨论】：

不，你不能。以您需要的亮度保存图像....

hsivonen.fi/png-gamma

我认为您没有阅读完整的 Gert B，我确实以我需要的亮度保存了图像，并且原始文件是完美的，但是我将它放在网站上突然变亮两倍，或者说是蓝色阴影亮度的两倍。

【参考方案1】：

我在图像上放置了一个黑色画布并更改了亮度：

c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0,0,c.width,c.height); //as image size
ctx.fillStyle = "#000000" + brightness;
ctx.fill();

【参考方案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); ....

这对代码的可维护性更好。

【讨论】：

这是一个很好的解决方案，适用于具有以下特性的平行滚动容器： background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png) ;

【参考方案3】：

为相同尺寸的背景图片创建一个子div。 使用 RGBA 设置子 div 的背景颜色，其中包括一个 Alpha 通道（不透明度）。 在 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);

【参考方案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;

【参考方案5】：

我遇到了同样的问题，但它是与 Gif 相关的。

我的解决方法：

我在 PowerPoint 中制作了一个非常小的黑色方形图像，并将其透明度设置为 50%，并将其保存为名为“dimmerswitch.png”的文件

比我在代码中首先引用的那个：

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

【参考方案6】：

如果没有其他办法，你只需做 Photoshop 来降低亮度。

【讨论】：

因此，如果您的答案被理解为：“只需对图像进行 Photoshop 处理。忘记为其查找 CSS 规则”...?! 好的...可以作为答案。

【参考方案7】：

这是一个选项，但它不是很实用，并且不适用于旧浏览器：

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：

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

确实，最好在图像编辑器中处理图像，直到获得所需的浏览器结果。

【讨论】：

很多时候事先编辑图像不是一种选择，这就是过滤器存在的原因。例如，如果您想使背景图像变暗，然后在悬停时移除变暗效果......您将如何在 CSS 中使用两个具有所需黑暗度的单独图像来做到这一点？有关此效果的示例，请将光标悬停在 BBC 网站上的图像上，这是我目前正在克隆的网站。 bbc.com

【参考方案8】：

没有办法在每个浏览器中都可以做到这一点，但如果你愿意，你可以在 webkit 浏览器（Chrome、Safari、Opera）中使用filter 样式：

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

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

【讨论】：

但这会使整个元素变暗，包括文本和边框......最好使用 opacity() 或其他任何东西。

不透明度不一定会变亮，它只是让背景发光。为了使不透明度显示类似的效果，您必须强制父元素具有白色背景。将background:white 应用于图像是不行的，因为背景的不透明度也会设置为与背景相同的值。