Html 浏览器收缩时底部渐变太深

在底部有一个站点，你会注意到它的底部有一个渐变，但是当用户收缩他的浏览器时，你会注意到它会向左滑动，只要它不会走得太远就可以了。当收缩过远时，它应该和上面div的最小宽度齐平，但它会继续向左推。关于如何做到这一点，您有什么想法吗？

使用CSS3渐变，如下所示：

以下是一些IE解决方案的问题：

---

我认为实现我所做的事情的最好方法是通过JavaScript，所以我编写了这个JQuery，以防任何人有类似的东西

/*Script is designed to keep a gradient from being cropped by the browser
this script requires JQuery, tested on version 1.6 free with no waranty GPL licence.

SETUP-Place what you need here:...*/
var whenreaches = 1100; //When resize reaches this point do it to provide a smooth  transition
var minwidth = 500; //This will be the min width in px, if it reachs this the Javascript will switch the CSS

//Resize event will trigger this JS...
$(window).resize(function(){
 var current_width = $(window).width();
 var current_bg = $('body').css('background-position');
 if(current_width <= whenreaches){
 //We need to change it to scroll, so the effect is not lost
    $('body').css('background-attachment','scroll');
    $('body').css('background-position',minwidth+"px 0%");
 }
 //Make sure it can return too
 if(current_width >= whenreaches){
    $('body').css('background-attachment','fixed');
    $('body').css('background-position',"100% 100%");
 }
  });

/*脚本旨在防止浏览器裁剪渐变
此脚本需要JQuery，在1.6版免费版上测试，没有谨慎的GPL许可证。
设置在此处放置所需内容：*/
var whenreaches=1100//当“调整大小”达到此点时，请执行此操作以提供平滑过渡
var minwidth=500//这将是px中的最小宽度，如果达到该值，Javascript将切换CSS
//调整大小事件将触发此JS。。。
$（窗口）。调整大小（函数（）{
var current_width=$（窗口）.width（）；
var current_bg=$（'body'）.css（'background-position'）；
如果（当前宽度=何时到达）{
$（'body'）.css（'background-attachment'，'fixed'）；
$（'body'）.css（'background-position'，'100%100%”）；
}
});

---

您将不得不调整背景图像和HTML文档的缓存和最小宽度值

我对这个解决方案有点怀疑，因为CSS3的兼容性非常不稳定，代码是：“背景颜色：#1a82f7；背景图像：url（images/linear_bg_1.png）；背景重复：repeat-y；”因为回退是它已经在使用的最基本的东西，它会收缩太远，使白色进入链接下。这样它既不会裁剪背景图像也不会缩放。更好的解决方案是使用CSS最小宽度属性。