Question

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

我有一个具有透明背景图像的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;
}

这很好用，但是我需要做的是按宽度划分不透明度而不是不透明度为0.9的100％至80％和不透明度为1的20％

我想使用CSS mask属性，但是我发现它的支持程度不高

Answer 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>

Answer 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>

Answer 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>

CSS背景图片局部宽度不透明

3 个答案: