我正在尝试为我的网站上的左右边距制作一个褪色的渐变，但我能想到的唯一方法是在这个小提琴上找到:https://jsfiddle.net/btzr1vox/
body {
background-color: #fafafa;
}
.box-1 {
background-image: linear-gradient(to left, rgb(250, 250, 250) 0%, rgb(0, 0, 0, 1) 15%);
display: inline-block;
width: 50%;
}
.box-2 {
background-image: linear-gradient(to left, rgb(0, 0, 0) 85%, rgb(250, 250, 250, 1) 100%);
float: left;
width: 50%;
}
.row {
max-width: 114rem;
margin: 0 auto;
}
.col-1-of-2 {
width: calc((100% - #{6rem}) / 2);
}
.color {
color: white;
}
.column-1 {
margin-right: 3rem;
}
.column-2 {
margin-left: 3rem;
}
它工作，但它将页面划分为列，这是我不想要的，因为我将不得不重复的过程为网站的每个部分。 这似乎很麻烦，特别是如果我想改变列的宽度，比如一个块只占页面的1/3，而其他的2/3，以此类推。
我建议将白色渐变与保存文本的元素分开，这样它们就不会相互依赖了。 甚至更容易:如果创建两个元素并对其应用position:absolute；属性，则可以在任何需要的地方重用它们:在整个背景之上，或每个部分。
如果您遇到了覆盖渐变的文本问题，您当然可以为保存文本的元素提供一个等于渐变的宽度的填充，这样它们就不会碰到渐变。
null
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
body {
position: relative;
background-color: #36393f;
}
.gradient-left {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 100%;
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
}
.gradient-right {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 100%;
background-image: linear-gradient(
to left,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
}<div class="gradient-left"></div>
<div class="gradient-right"></div>