将透明背景拉伸到某一点

Question

我正在使用bootstrap。现在我有一个这样的部分：

现在我希望它具有透明背景。但只有标有红线的宽度。

这是代码：

.btrcontainer {
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

但它使整行变得透明。我希望它只能达到那个标志。试过background-size财产。有人可以帮忙吗？

Answer 1

您可以使用线性渐变

来完成此操作

这个透明度为50％，之后逐渐变色，直到最后达到rgba(0, 0, 0, 0.3)。

.btrcontainer {
  padding-top: 25px;
  height: 50px;
  padding-bottom: 25px;
  background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.3));
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

<div class="btrcontainer"></div>

这个做了类似的事情但从50％透明到达80％的完全黑色然后保持这种状态。

.btrcontainer {
  padding-top: 25px;
  height: 50px;
  padding-bottom: 25px;
  background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 1) 80%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

<div class="btrcontainer"></div>

Answer 2

该背景图片上的透明div叠加

你可以分成宽度百分比的两个部分

并将第一个div设置为透明

并在其他div上添加css，无论你现在想要分开它。

希望有所帮助！