jquery - 如何根据浏览器/屏幕的宽度更改 'background-position'

Question

我已经创建了我要解决的问题的简化版本。请看一下

HTML:

<div class="container">
<div class="bg-left">
<div class="content">
        Some content here
</div>
</div>
</div>

CSS:

.container {
   display: block;
   height: 200px;
   width: 100%;
   background-color: #e2e2e2;
}

.bg-left {
   background-image: url('http://i.imgur.com/hDheuGJ.png');
   background-repeat:no-repeat;
   background-position: 0px 0px;
   width: 100%;
   height: 100%;
}

.content {
   width: 960px;
   margin: 0 auto;
   font-size: 20px;
}

JSFiddle: http://jsfiddle.net/gnPC6/

此代码包含:

1) 100% 宽度的 DIV，其中包含位于左上角的背景图像(即黑色三 Angular 形)

2) 在这个 div 中有另一个 div，例如960 像素宽且居中。这里会放一些内容。

问题:如果调整浏览器窗口的宽度，左上角的黑色三 Angular 形仍然可见，结果是该图像遮盖了前景内容。

我想要实现的是:

1) 如果用户浏览器调整到 1050px 或以下，那么黑色三 Angular 形的 BACKGROUND-POSITION 将调整，使得浏览器调整得越大，黑色三 Angular 形就越不可见(即背景图像动态滑动离开屏幕向左)...

如果用户窗口为1051px或以上，背景位置应保持为0px 0px；

如果用户窗口是1050px，background-position应该是0px -1px；

如果用户窗口是1049px，background-position应该是0px -2px；

如果用户窗口是1048px，background-position应该是0px -3px； 等等

本质上这就是我想要实现的目标，但我不知道从哪里开始使用 Javascript 来解决这个问题。

如果您有任何建议，请告诉我，非常感谢!

编辑 我知道媒体查询，但我不相信它们可以有效地解决这个问题。我不想只根据浏览器的宽度更改 CSS，我希望背景位置随着浏览器大小的调整而动态变化。为此，我确定需要一个 javscript 解决方案，而不是数百个@media 声明

Answer 1

一旦找到发生重叠的断点，就可以使用类似这样的方法来覆盖较窄的浏览器视口(viewport):

http://jsfiddle.net/gnPC6/21/

.container {
    background-color: #e2e2e2;
    display: block;
    width: 100%;
    overflow: hidden;
}
.content {
    width: 300px;
    margin: 0 auto;
    font-size: 20px;
    position: relative;
}

.content:before {
    background-image: url('http://i.imgur.com/hDheuGJ.png');
    background-repeat:no-repeat;
    background-position: 0px 0px;
    width: 150px;
    height: 150px;
    content: '';
    display: block;
    position: absolute;
    left: -125px;
}