如何将线性渐变背景的过渡点设置在固定像素位置？

Question

我想为引导按钮添加样式，使它们具有不同背景颜色的两个部分。

像这样的东西：

我已经尝试过这个：

.btn{
    background-image: linear-gradient(-90deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.3) 30%);
}

但我不能使用 % 来设置颜色之间的过渡位置，因为这样就会发生：

我需要一种方法来设置固定数量的像素。

这不起作用：

.btn{

    background-image: linear-gradient(-90deg, rgba(0,0,0,0), rgba(0,0,0,.3) 32px);

}

怎么可能呢？

更新

感谢@AmauryHanser 提供的解决方案（我的解决方案并不遥远！;））我已将其改进为我认为一些非常好的按钮，并保持代码非常整洁和可读：

CSS：

.btn {

    background-image: linear-gradient(90deg, rgba(0,0,0,.4) 36px, rgba(0,0,0,0) 36px);

    padding-left:0px;

}

.fas {

    margin-left: 8px;

    margin-right: 10px;

    color: rgba(255,255,255,.8);

}

html:

<a href="#" class="btn btn-primary">

    <span class="fas fa-arrow-circle-left fa-fw"></span>

    Avslutt uten å lagre

</a>

<button type="submit" class="btn btn-success">

    <span class="fas fa-save fa-fw"></span>

    Lagre

</button>

结果：

请注意 的使用fa-fw，它设置 FontAwesome 图标的固定宽度。为了让文本在所有按钮上的相同像素位置开始，这是必要的。

Answer 1

您可以在线性渐变定义中使用像素.btn{&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; background-image: linear-gradient(to right, rgba(0,0,0,0) 40px, rgba(0,0,0,.3) 40px);}<a class="btn">ICON Text</a>你可以看到我用了to right代替-90deg，这样更容易理解。