更改网站背景(图片)白色部分

我正在编程一个网站，想要改变它的背景图像，当我到达一个div框时，我发现它就像我想要改变它(背景)的颜色时必须这样做，但不是如何与图像一起去，有点像这样

http://www.formuswithlove.se/

，但只是与图像

下面是如何使用颜色的代码，如果它对某人有帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
    margin:0;
    padding:0;
    background:white;
}
div{
    width:100%;
    height:1600px;
}
</style>
<script type="text/javascript">
var section = {
    sections: [
        'section1',
        'section2',
        'section3'
    ],
    sectionOffset: {},
    sectionBackground: {
        'section1': 'rgb(0, 0, 0)',
        'section2': 'rgb(132, 132, 132)',
        'section3': 'rgb(255, 255, 255)'
    },
    currentSection: null
}
window.onload = function()
{
    var looplen = section.sections.length;
    for(var i = 0; i < looplen; ++i)
    {
        section.sectionOffset[section.sections[i]] = document.getElementById(section.sections[i]).offsetTop;
    }
    setTimeout("initialBackgroundChange()", 50);
}
window.onscroll = function()
{
    tryBackgroundChange();
};
function tryBackgroundChange()
{
    var looplen = section.sections.length,
        match,
        backgroundColor;
    for(var i = 0; i < looplen; ++i)
    {
        if(pageYOffset >= section.sectionOffset[section.sections[i]])
        {
            match = section.sections[i];
        }
    }
    if(match != section.currentSection)
    {
        section.currentSection = match;
        changeBackground();
    }
}
function changeBackground()
{
    var cbc, // Current background-color
        tbc, // Target backgrounc-color
        ri,  // Red incrementation
        gi,  // Green incrementation
        bi,  // Blue incrementation
        rgb, // Temporary color from cbc to tbc
        smoothness = 20; // Higher is smoother
    cbc = getStyle(document.body, 'background-color');
    cbc = cbc.substr(4, cbc.length-5);
    cbc = cbc.split(", ");
    tbc = section.sectionBackground[section.currentSection];
    tbc = tbc.substr(4, tbc.length-5);
    tbc = tbc.split(", ");
    ri = (tbc[0] - cbc[0]) / smoothness;
    gi = (tbc[1] - cbc[1]) / smoothness;
    bi = (tbc[2] - cbc[2]) / smoothness;
    for(var i = 1; i <= smoothness; ++i)
    {
        rgb = [
            Math.ceil(parseInt(cbc[0]) + (ri * i)),
            Math.ceil(parseInt(cbc[1]) + (gi * i)),
            Math.ceil(parseInt(cbc[2]) + (bi * i))
        ];
        setTimeout("document.body.style.backgroundColor = 'rgb(" + rgb.join(",") + ")'", i * (240/smoothness));
    }
}
function initialBackgroundChange()
{
    if(pageYOffset == 0)
    tryBackgroundChange();
}
function getStyle(elem, name)
{
    if (document.defaultView && document.defaultView.getComputedStyle)
    {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }
    else if (elem.currentStyle)
    {
        if (/backgroundcolor/i.test(name))
        {
            return (function (el)
            { // get a rgb based color on IE
                var oRG=document.body.createTextRange();
                oRG.moveToElementText(el);
                var iClr=oRG.queryCommandValue("BackColor");
                return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+
                        ((iClr & 0xFF0000)>>16)+")";
            })(elem);
        }
        return elem.currentStyle[name];
    }
    else if (elem.style[name])
    {
        return elem.style[name];
    }
    else
    {
        return null;
    }
}
</script>
</head>
<body>
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
</body>
</html>

try this:

if($(document).scrollTop() == 400){
   $('body').css('background','red')
}

相关内容

最新更新

热门标签：