html - 将透明背景拉伸(stretch)到一定程度

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>