Jquery固定大小

Question

我尝试固定背景和图像大小，但与JQuery有冲突。我在这里练习：http://jsfiddle.net/CyberTramp/uZXQu/

问题是背景-图像和div应该有相同的大小，如浏览器的分辨率“始终在中心”，我的原始图像宽度1500像素

我所拥有的：

CSS

.right_circle
{
    position: relative;
    width: 50%;
    height: 300px;
    overflow: hidden;   
    background-image: url('http://cloud.graphicleftovers.com/9583/261791/blue-and-orange-circle-globe.jpg'); //original size 500 × 500 must = screen resolution
}
.left_circle
{    position: relative;
    background-image: url('http://www.kidopo.com/wp-content/uploads/2011/05/Circle-mazep.gif');    
}​

HTML

<body class='left_circle'>
<div class='right_circle'></div>
</body>​

JQuery

$('html').mousemove(function(e) {
    var page = $('html').width();
    if (page / 2 > e.pageX) {
        $('.right_circle').css('width', page - e.pageX);
    } else {
        $('.right_circle').css('width', page - (e.pageX - (page / 2)) - (page / 2));
    }
});​

Answer 1

的问题是背景-图像和div应该有相同的大小，就像浏览器的分辨率“总是在中心”

添加以下CSS：

background-repeat: no-repeat;
background-position:center;
background-attachment:fixed;
background-size: 100% 100%;

也试着重新组织一下你的样式，只指定共享的样式。

完整的CSS：

.right_circle, .left_circle{
    background-repeat: no-repeat;
    background-position:center;
    background-attachment:fixed;
    background-size: 100% 100%
}

.right_circle{ 
    width: 50%;
    height: 300px;
    background-image: url('http://cloud.graphicleftovers.com/9583/261791/blue-and-orange-circle-globe.jpg');  
}

.left_circle{    
    background-image: url('http://www.kidopo.com/wp-content/uploads/2011/05/Circle-mazep.gif');
}​

DEMO - background-image & div与浏览器大小相同，居中