Question

在http://beta.es3inc.com有一个网站，您会在底部注意到它底部有一个渐变，但是当用户收缩浏览器时，您会注意到它向左滑动，这很好只要它不太远。当收缩太远时它应该与其上方div的最小宽度齐平，但是它会继续向左推。关于如何做到这一点的任何想法？

Answer 1

使用CSS3 Gradient，如下所示：

http://css-tricks.com/examples/CSS3Gradient/

这里有一些IE解决方案：

Gradient colors in Internet Explorer

Answer 2

我认为实现我正在做的最好的方法是通过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%");
 }
  });

您必须将高速缓存和最小宽度值调整到背景图像和HTML文档

当浏览器缩小时，底部渐变太远了

2 个答案: