如何在<div>中调整背景图像的亮度而又不影响前景项目?

约翰·哈里森

首先,我是HTML和CSS的入门者。话虽这么说,我在网站的一部分中有这个JS Fiddle:https//jsfiddle.net/rharrison2641/sb3rzm9t/2/

码。)

HTML:

<section class="FutureGoals">

  <div class="BlizzBox">

    <div class="Blizzard1">

      <img alt="BlizzPop" 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之外,但这只会导致窗口大小调整极大地扭曲。有人可以为此提出建议吗?我已经尝试了好几天,所以任何解决方案或帮助将不胜感激。

西里尔

您可以将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 alt="BlizzPop" 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 alt="BlizzPop" src="https://s8.postimg.cc/5avnnvurp/Blizz_Pop.png" class="BlizzPop">
    </div>
  </div>
</section>

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何设置div转换而又不影响背景图像?

如何在Windows OS上的c ++中更改整个控制台的背景颜色而又不影响文本颜色

CSS:如何在div中模糊背景图像?

如何在调整大小窗口上计算div背景图像大小

如何在div中居中(背景)图像?

如何按比例调整“div”的背景图像大小?

如何在 div 中使用背景图像?

如何在TImage上显示Div背景图像

如何在视差背景图像中使div居中

如何在div元素上转换多个背景图像?

如何在悬停时增加边框宽度而又不移走CSS中的div位置?

如何在ionic 3中的div中设置背景图像?

如何在Odoo中为特定页面继承和修改“ website.layout”模板,而又不影响整个网站?

如何使用CSS为div的背景图像设置不透明度或降低亮度

如何在不影响 div 内容的情况下更改背景颜色透明度?

如何设置不影响背景图像的边框

如何在Div的背景中从项目目录添加视频

如何在特定时间后关闭蝙蝠而又不影响执行力?

如何在DIV中缓存图像

如何在div中从右到左显示图像

如何在div中居中此图像

如何在div中缩放图像行

如何使div背景图像响应?

如何使背景图像具有响应能力而又不丢失比例

如何在div中更改div的整个背景

如何在旋转图像CSS或Javascript时使背景图像填充空白(在div上)?

如何在div后面放置背景图片

如何在背景图片下方制作<div>的底边

如何在不影响标题内容的情况下将div浮动到标题div的右侧?