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 来制作侧边栏。但是容器的margin-right空间也有相同的渐变。

我已经为 .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

与其将背景应用到整个容器并设置渐变应该开始的百分比以使其适合侧面，我建议仅将其应用于侧面并相应地调整样式。

除了分辨率问题外，您还存储了重复的百分比值。

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

http://jsfiddle.net/ky9enkb4/

Answer 3

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

@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 4

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

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

Answer 5

你好，你可以试试这个可能对你有用

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