如何在 <div> 中调整背景图像的亮度而不影响前景项目？ [复制]

Posted

技术标签:

【中文标题】如何在 <div> 中调整背景图像的亮度而不影响前景项目？ [复制]【英文标题】：How to adjust the brightness of a background image in a <div> without it affecting the foreground items? [duplicate] 【发布时间】：2019-02-07 21:38:46 【问题描述】：

让我先声明一下，我是 html 和 CSS 的菜鸟。话虽如此，我的网站的一部分有这个 JS Fiddle：https://jsfiddle.net/rharrison2641/sb3rzm9t/2/

代码。）

HTML：

<section class="FutureGoals">

  <div class="BlizzBox">

    <div class="Blizzard1">

      <img  src="https://s8.postimg.cc/5avnnvurp/Blizz_Pop.png" class="BlizzPop">

    </div>

  </div>

</section>

CSS：

.FutureGoals 
  height: 100vh;
  overflow: hidden;


.BlizzBox 
  height: 100vh;
  overflow: hidden;


.Blizzard1 
  background: url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);
  background-repeat: no-repeat;
  background-position: 75%;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


.Blizzard1:hover 
  -webkit-filter: brightness(50%);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');


.BlizzPop 
  position: relative;
  height: auto;
  width: 30%;
  left: 25%;
  top: 9%;
  z-index: 1;
  transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -webkit-transition: all .7s ease;
  -o-transition: all .7s ease;


.Blizzard1:hover .BlizzPop 
  z-index: 1;
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');

基本上我要做的是使背景图像 Blizzard.jpg 变暗，但导致 Blizzard.png 徽标不会变暗并保留其白色。就目前而言，一切正常，但标志变暗为浅灰色。我已经尝试将图像与背景图像一起放在 div 之外，但这只会导致窗口大小调整非常糟糕。有人可以为此提出解决方法吗？这几天我一直在尝试，所以任何解决方案或帮助将不胜感激。

【问题讨论】：

【参考方案1】：

您可以将rgba() 渐变悬停在background-image 上以使其变暗。

background: 
     linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),/* the gradient on top, adjust color and opacity to your taste */
      url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);

下面的演示

.FutureGoals 
  height: 100vh;
  overflow: hidden;


.BlizzBox 
  height: 100vh;
  overflow: hidden;


.Blizzard1 
  background: url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);
  background-repeat: no-repeat;
  background-position: 75%;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


.Blizzard1:hover 
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);
  background-repeat: no-repeat;
  background-position: 75%;
  background-attachment: fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');


.BlizzPop 
  position: relative;
  height: auto;
  width: 30%;
  left: 25%;
  top: 9%;
  z-index: 1;
  transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -webkit-transition: all .7s ease;
  -o-transition: all .7s ease;


.Blizzard1:hover .BlizzPop 
  z-index: 1;
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');

<section class="FutureGoals">
  <div class="BlizzBox">
    <div class="Blizzard1">
      <img  src="https://s8.postimg.cc/5avnnvurp/Blizz_Pop.png" class="BlizzPop">
    </div>
  </div>
</section>

https://jsfiddle.net/sb3rzm9t/8/

或者设置一个inset box-shadow 也带有一个rgba() 颜色（过渡在盒子阴影上也很有效）

box-shadow:inset 0 0 0 150vw rgba(0,0,0,0.5);/* hudge without blur to cover the whole container */

下面的演示

.FutureGoals 
  height: 100vh;
  overflow: hidden;


.BlizzBox 
  height: 100vh;
  overflow: hidden;


.Blizzard1 
  background: url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);
  background-repeat: no-repeat;
  background-position: 75%;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


.Blizzard1:hover 
box-shadow:inset 0 0 0 150vw rgba(0,0,0,0.5);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');


.BlizzPop 
  position: relative;
  height: auto;
  width: 30%;
  left: 25%;
  top: 9%;
  z-index: 1;
  transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -webkit-transition: all .7s ease;
  -o-transition: all .7s ease;


.Blizzard1:hover .BlizzPop 
  z-index: 1;
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');

<section class="FutureGoals">
  <div class="BlizzBox">
    <div class="Blizzard1">
      <img  src="https://s8.postimg.cc/5avnnvurp/Blizz_Pop.png" class="BlizzPop">
    </div>
  </div>
</section>

https://jsfiddle.net/sb3rzm9t/9/

【讨论】：

以上是关于如何在 <div> 中调整背景图像的亮度而不影响前景项目？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

如何自动将div的高度调整到背景图像？

响应式设计：如何调整图像/背景图像的大小并垂直对齐 div？

如何在 div 中居中（背景）图像？

如何使 div 响应的背景图像？

在contenteditable div中禁用图像的大小调整

Div 内的 Twitter Bootstrap 响应式背景图像