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;}

好的，现在我需要为侧边栏设置一个渐变背景。我可以使用梯度图像重复-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%);
}

Answer 2

嗨，你可以试试这个，也许这个对你有用。

​

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

​

Answer 3

与其将背景应用于整个容器，并设置渐变应该开始的百分比，这样它才适合于一边，我建议只将其应用到一边，并相应地调整样式。

除了解决问题外，还存储了重复的百分比值。

aside{
   width:30%;
   float:left;
   //background gradient definition here
}

http://jsfiddle.net/ky9enkb4/