代码之家 › 专栏 › 技术社区 › Amit Wagner

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

css html

Amit Wagner · 技术社区 · 6 年前

如何创建局部宽度不透明度?

.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

我想使用cssmask属性,但是我发现它没有得到很好的支持

3 回复 | 直到 6 年前

Paulie_D 6 年前

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

使用二

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>

Temani Afif 6 年前

一个想法是在图像上方使用覆盖来模拟这种效果。使用的颜色必须与以下背景相同:

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

××× × ×××× 6 年前

使用 :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%;

}