如何根据浏览器/屏幕的宽度更改“背景位置”答案

【问题标题】：How to change 'background-position' based on width of browser/screen如何根据浏览器/屏幕的宽度更改“背景位置”
【发布时间】：2013-10-18 15:14:58
【问题描述】：

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

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，其中包含位于左上角的背景图像（即黑色三角形）

2) 在这个 div 中还有另一个 div，例如960px 宽且居中。部分内容会放在这里。

问题：如果调整浏览器窗口的宽度，左上角的黑色三角形仍然可见，结果是这张图片遮挡了前景内容。

我想要实现的是：

1) 如果用户的浏览器调整到1050px或以下，那么黑色三角形的背景位置会调整，使得浏览器调整得越多，黑色三角形就越不明显（即背景图片动态滑动离开屏幕左侧）...

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

如果用户窗口是1050px，背景位置应该是0px -1px；

如果用户窗口是1049px，背景位置应该是0px -2px；

如果用户窗口是1048px，背景位置应该是0px -3px；等等

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

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

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

【问题讨论】：

您想要做的事情可以使用 CSS 媒体查询来完成。去读吧。
如上所述，媒体查询可以轻松解决这个问题。一些链接可以帮助您：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries，webdesignerwall.com/tutorials/css3-media-queries
谢谢，但我已经阅读了媒体查询。据我所知，我可以指定@media (max-width: 1050px) {.bg-left { background-position: 0px -1px }} 之类的内容，但我该怎么做才能使背景位置随着宽度逐像素减小而动态改变？
是的，媒体查询可以用于执行此操作，但这样做效率非常低。请注意，OP 希望将 bg 图像移动 1px 以获取可能的数百个断点。重组代码会更有效，这样图像就不必移动（或者它在没有媒体查询帮助的情况下重新定位）。
实际上这个要求是没有意义的。唯一将浏览器调整到如此程度的观众是开发人员。 OP 应该专注于 MQ 设计突破点而不是像素完美问题。

标签： jquery css resize background-position

【解决方案1】：

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

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;
}

【讨论】：

【解决方案2】：

你可以做这样的事情（使用 jquery）： http://jsfiddle.net/spacebean/gnPC6/18/

显然，您需要拉伸浏览器才能以正确的尺寸查看它。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function debouncer(func) 
{   
    var timeoutID, timeout = 100;
    return function () 
    {
        var scope = this, args = arguments;
        clearTimeout(timeoutID);
        timeoutID = setTimeout(function () 
        {
            func.apply(scope, Array.prototype.slice.call(args));
        }, timeout);
    };
}

$(window).resize(debouncer(function () 
{
    bgResize($(document));

}));

     function bgResize(){

    var thisWidth = $(document).width(),
        offSet = thisWidth - 1051;

    if(offSet < 0) {
        $('.bg-left').css({'background-position': offSet+'px 0px'});   
    }     
}    

$( document ).ready(bgResize);

</script>

超时/去抖动是为了防止脚本在浏览器移动的每个像素处触发，而是将其限制在触发前的十分之一秒。如果您不关心一次创建可能数百个函数调用，您可以这样做：

   $(window).resize(bgResize);

     function bgResize(){

    var thisWidth = $(document).width(),
        offSet = thisWidth - 1051;

    if(offSet < 0) {
        $('.bg-left').css({'background-position': offSet+'px 0px'});   
    }     
}    

$( document ).ready(bgResize);

【讨论】：

嗨@spacebean，很抱歉，因为我没有测试你的解决方案。我正在为工作中的一个项目创建一个 HTML 演示，但我被卷入了其他事情。迫不及待地想测试一下，我会尽快让你知道的。你的工作没有白费！
我目前正在测试这段代码。我喜欢你的风格，在大多数情况下它可以工作，但唯一的问题是它不会改变背景位置，直到用户调整浏览器的大小。因此，如果用户在浏览器已调整大小的情况下加载网页，这将不起作用。知道如何在加载时应用 CSS 更改吗？非常感谢
嗯，包括$( document ).ready( bgResize($(document)) ); 应该意味着它会自动加载。当您查看小提琴时，它对您不起作用吗？
我更新了上面的代码，无论如何它更有意义（不需要在窗口中传递，参见 bgResize 函数），现在应该可以工作了。我实际上不确定为什么它可以在 jsfiddle 上工作而不被包装在匿名函数中。
设置为十分之一秒，以防止数百次调用同一个函数。您可以根据需要将其设置为更多/更少，也可以将其全部删除。如果页面中还有其他 js 元素，它最终可能会导致问题，但不会有轻微的延迟。您可以在 bgResize 函数中添加控制台日志，以查看在调整大小时调用它的频率。我在上面更详细地编辑了我的答案。

【解决方案3】：

最简单的方法是使用我主要用来根据窗口大小调整字体大小的少量 jQuery。每次都能完美运行...

检查窗口宽度
为宽度创建一个变量
根据整体宽度的一小部分更改 css

您可以轻松地从我的小提琴中修改代码以更改背景位置的 css。您还可以根据需要添加任意多行的 css 来更改其他 css 元素：

   $(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
$('#num').css( "font-size", windowSize / 4 );

等等……

http://jsfiddle.net/insitemobile/xhP8k

【讨论】：