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

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{

    display: inline-block;

    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，这样更容易理解。