如何让CSS盒子保持100%宽度仅30%区域显示渐变背景？

你可以通过以下两种方式实现盒子宽度保持100%，仅30%区域显示渐变背景的需求： #

方案1：直接修改渐变色标 #

在渐变参数里明确指定渐变终止于30%位置，剩余区域统一设为透明即可：

<div class="box">30%</div>

.box{
    width: 100%;
    background : linear-gradient(to right, rgba(250,0,0,0), rgba(250, 0, 0, 1) 30%, transparent 30%);
}

该方案逻辑：0%_{30%宽度区间执行从透明到红色的渐变，30%}100%宽度区间完全透明。 #

方案2：控制背景层尺寸 #

将背景层的宽度设置为30%，同时禁止背景重复：

.box{
    width: 100%;
    background : linear-gradient(to right, rgba(250,0,0,0),rgba(250, 0, 0, 1));
    background-size: 30% 100%;
    background-repeat: no-repeat;
}

如果需要将渐变背景调整到右侧显示，额外添加background-position: right top;属性即可。 #

内容的提问来源于stack exchange，提问作者김규민