html - CSS 背景渐变显示不适合大屏幕

Question

这是我的设计布局。像这样的结构

<div class="outer">
 <div class="container">
    <div class="content"></div>
    <aside></aside>
 </div>
</div>

该布局的 css 是

.container{width:1000px; margin:0 auto;}
.content{width:70%; float:left;}
aside{width:30%; float:left;}

好的，现在我需要为侧边栏设置一个渐变背景。我可以使用渐变图像 repeat-y 来制作侧边栏。但是容器的右边距空间也有相同的梯度。

我已经为 .outer div 使用了背景渐变。普通桌面没问题。但是当从更高的分辨率访问它时，它会显示类似的东西。

我知道梯度位移的发生是因为用于生成梯度的 %。我给你的是我使用过的默认渐变线，没有前缀。

background: linear-gradient(to right,  #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);

可能的解决方案是什么？？？

** 这是一个带有短边栏的长页面。但是背景应该是从上到下。

如果您需要实时链接，我有。 https://blog.measuredsearch.com/

Answer 1

为 container_wrap 类尝试这个背景

#main .container_wrap
{
    background:-webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}