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 class

的背景知识

#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/

Answer 4

浏览器显示正确的结果。作为快速变体媒体查询宽屏

@media screen and (min-width: 1500px) #main .container_wrap {
    background: linear-gradient(to right, #ffffff 0%,#ffffff 62%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}

或者只给出白色渐变宽度62％的宽度。这很正常。

Answer 5

我相信这是你想要实现的目标

1. 整个页面从上到下有背景渐变。从#fff开始以容纳内容部分
2. 容纳侧边栏的黑暗区域。
3. 用大屏幕和小屏幕保持稳定性。

我做了什么

1. 我已将渐变添加到身体，使左边为白色，右边为深色。
2. 不同的渐变白色只有深色，并且以与身体结尾相同的颜色结束（如果阴影差异发生在容器外，则可能需要检查真正的大屏幕）。
3. 容器，除了占据屏幕顶部到底部的高度外

查看Fiddle

body{background: linear-gradient(to right,  #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#cfd7da 72%,#cfd7da 100%);margin:0;}
.container{width:400px; margin:0 auto;background:#fff;height:100vh;border:1px solid #999;}
.content{width:70%; float:left;height:100vh;}
aside{width:30%; float:left;background: linear-gradient(to right,  #acb9bf ,#cfd7da 72%,#cfd7da 100%);height:100vh;}