在背景图像的中心添加透明水平线

Question

我希望实现的透明线是：

我最接近的是使用渐变：

渐变的css是：

.login {
    background: linear-gradient(transparent 20%, #aaaaaa, transparent 77%),  url("bg-image.jpg");
}

我只对获得相同的透明线感兴趣。 我该怎么办？

Answer 1

您可以使用线性渐变，如下所示：

＆＃13;

＆＃13;

.box {
  width:400px;
  height:200px;
  background:
  linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) 0 50%/100% 50px no-repeat,
  url(https://lorempixel.com/400/200/);
}

＆＃13;

<div class="box">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是一种可能解决方案的示例：

＆＃13;

＆＃13;

.wrap{
  height:350px;
  width:100%;
  background: linear-gradient(red, yellow);
  display:flex;
  flex-flow:column;
  justify-content:center
}

div div{
  background-color:rgba(256,256,256,0.35);
  height:100px;
  width:100%;
}

＆＃13;

<div class="wrap">
  <div>
  
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我相信你正在寻找这样的东西。这使用flexbox来对齐白线＆＃39;垂直在图像的中心。白线的透明背景只需使用rgba颜色即可完成。

这种方法的优点是，白线的高度会随着它的内容而缩放。

＆＃13;

＆＃13;

.background-image {
  background: url('https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85740266a52ea733187e9775fdf8d2d5&auto=format&fit=crop&w=1567&q=80') no-repeat center center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.background-image__white-line {
  background:rgba(255,255,255,0.5);
}

.background-image__white-line__content {
  margin: auto;
  max-width: 400px;
  padding: 40px;
}

＆＃13;

<div class="background-image">
  <div class="background-image__white-line">
    <div class="background-image__white-line__content">
      Whatever you want
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改 简化了css代码，感谢Termani Afif！