【问题标题】:Change brightness of background-image?改变背景图像的亮度?
【发布时间】:2014-02-17 06:05:51
【问题描述】:

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

 body{
 background-image:url();
 }

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

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

谢谢。

【问题讨论】:

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

标签: html css image background brightness


【解决方案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】:
    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);
    }
    

    【讨论】:

      【解决方案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 应用于图像是不行的,因为背景的不透明度也会设置为与背景相同的值。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2016-04-22
          • 1970-01-01
          • 1970-01-01
          • 2021-11-09
          • 1970-01-01
          • 1970-01-01
          • 2018-10-27
          相关资源
          最近更新 更多