1

背景と画像のサイズを修正しようとしましたが、JQuery と競合しています。ここで練習します: http://jsfiddle.net/Cyber​​Tramp /uZXQu/

問題は、背景画像と div はブラウザの解像度と同じサイズである必要があり、「常に中央に」、元の画像の幅は 1500 px です。

私が持っているもの：

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');
}​

デモ- background-image と div はブラウザと同じサイズで、中央に配置されます

于 2012-09-18T22:47:14.293 に答える