首页 文章

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

提问于
浏览 次
1

我创建了一个我试图解决的问题的简化版本 . 请看一下

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/

This code contains:

1）DIV为100％宽度，包含位于左上角的背景图像（即黑色三角形）

2）在这个div内有另一个div，例如，宽960px，居中 . 一些内容将放在这里 .

Problem: 如果调整浏览器窗口的宽度，左上角仍会显示黑色三角形，结果是该图像模糊了前景内容 .

What I'm trying to achieve is thus:

1）如果用户浏览器的大小调整为1050px或更低，则黑色三角形的背景位置将进行调整，以使浏览器调整得越多，黑色三角形就越不可见（即背景图像动态滑出屏幕向左转）...

如果用户窗口为1051px或更高，则后台位置应保持为0px 0px;

如果用户窗口为1050px，则background-position应为0px -1px;

如果用户窗口为1049px，则background-position应为0px -2px;

如果用户窗口是1048px，则background-position应为0px -3px;等等

这本质上是我想要实现的，但我无法弄清楚从哪里开始用Javascript来解决这个问题 .

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

EDIT 我知道媒体查询，但我不想根据浏览器的宽度更改CSS，我希望在调整浏览器大小时动态更改背景位置 . 为此，我确信需要一个javscript解决方案，而不是数百个@media声明

jquery css resize background-position

3 回答

  • 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;
}
    回复于
  • 1

    你可以这样做（使用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);
    回复于
  • 0

    EASIEST的方法是使用这个少量的jQuery，主要用于根据窗口大小调整字体大小 . 它每次都很完美......

    • 检查窗口宽度

    • 为宽度创建一个var

    • 根据总宽度的一小部分更改css

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

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

    等小提琴...

    http://jsfiddle.net/insitemobile/xhP8k

    回复于

相关问题