css 背景图像部分宽度不透明度答案

【问题标题】：css background-image partial width opacitycss 背景图像部分宽度不透明度
【发布时间】：2018-10-29 21:01:10
【问题描述】：

如何创建部分宽度不透明度？

我有一个具有透明背景图像的 div，我用它来获得这样的效果

.indicators-menu {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      z-index: 1;
}

.indicators-menu::after {
  background-image: url('bg_platform_repeat.jpg');
  content: "";
  opacity: 0.9;
  top: 0;
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: unset;
}

这很好用，但我需要做的是按宽度分割不透明度而不是 100% 到 80% 不透明度 0.9 和 20% 不透明度 1

我想使用 CSS 掩码属性，但我发现它没有得到很好的支持

【问题讨论】：

如果您发布相关的 HTML，我会更好
嘿，你的解释和你的代码都有帮助。发布您尝试过的鼓舞人心的图像或完整代码。
使用两个伪元素（添加::before），使一个80% 和一个20% 宽，并相应地定位它们...？
我在这里尝试了所有答案，但我没有为我工作。也许是因为我的主要 div 是绝对的。我添加了主 div css。

标签： html css

【解决方案1】：

我需要做的是按宽度分割不透明度，而不是不透明度为 0.9 的 100% 到 80% 和不透明度 1 的 20%

使用两个具有相同背景图像但位置不同的伪元素。

div {
  width: 460px;
  height: 300px;
  margin: 1em auto;
  border: 1px solid red;
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-image: url(http://www.fillmurray.com/460/300);
  background-repeat: no-repeat;
  background-size: cover;
}

div:before {
  width: 80%;
  opacity: 0.5;
  /* for example */
}

div:after {
  width: 20%;
  left: 80%;
  background-position: 100% 0;
}

<div>

</div>

【讨论】：

【解决方案2】：

一个想法是在图像上方使用叠加层来模拟这种效果。使用的颜色需要和下面的背景一样：

.box {
  background: 
   linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)) left/80% 100%,
   url('https://picsum.photos/200/200?image=1069') center/cover;
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
}

<div class="box">
</div>

【讨论】：

【解决方案3】：

将:before与background: white;和opacity:0.1一起使用（我设置0.4只有你才能看到区别）和width:80%

.indicators-menu::after,.indicators-menu::before{
  background-image: url('https://i.imgur.com/BK7wL0d.jpg');
  content: "";
  opacity:1;
  top: 0;
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: unset;
}
.indicators-menu::before{
  background: white;
  opacity: 0.4;
  z-index: 2;
  width: 80%;

}

<div class="indicators-menu">

</div>

【讨论】：