1

我尝试修复背景和图像大小并与 JQuery 发生冲突。我在这里练习：http: //jsfiddle.net/Cyber​​Tramp /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));
    }
});​
4

1 回答 1

0

问题是背景图像和 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 与浏览器大小相同并居中

于 2012-09-18T22:47:14.293 回答