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

我已经创建了我正在尝试解决的问题的简化版本。请看一看如何根据浏览器/屏幕的宽度更改“背景位置”

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还有另一个格其是，例如宽960px并居中。一些内容将被放置在这里。

问题：如果浏览器窗口的宽度被调整大小，那么黑色三角形仍然会在左上角可见，并且结果是该图像模糊了前景内容。

我想要实现这样的：

1）如果用户的浏览器调整为1050px或之下，则黑三角的背景位置将调整使得浏览器更被调整大小后，黑色三角形的可见性就越差（即背景图像会动态地从屏幕向左滑动）...

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

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

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

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

这在本质上是什么，我想实现的，但我想不通的地方使用JavaScript开始解决这个问题。

请让我知道如果您有任何建议，非常感谢！

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

来源

2013-10-18 ghilton

你想做的事可以做到用什么CSS媒体查询。去阅读。 –

如上所述，媒体查询将很容易解决这个问题。一些链接可以为您提供以下帮助：https：//developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries，http://webdesignerwall.com/tutorials/css3-media-queries – user2212564

谢谢但我已经阅读过媒体查询。据我所知，我可以指定像'@media（max-width：1050px）{.bg-left {background-position：0px -1px}}'这样的东西，但我该如何做到这一点，以便背景位置是动态的随宽度逐个像素下降而改变？ – ghilton

你可以做这样的事情（使用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);

来源

2013-10-18 16:02:45 spacebean

这将是很好的知道这是否适用于你或不... – spacebean

嗨@spacebean，道歉，因为我还没有测试过你的解决方案。我在工作中为一个项目创建了一个HTML演示，但我被拉入了其他东西。迫不及待地尝试一下，我会尽快告诉你。你的工作没有浪费！ – ghilton

我目前正在测试此代码。我喜欢你的风格，但大多数情况下它的工作原理是唯一的问题是它不会改变背景位置，直到用户调整浏览器大小。因此，如果用户在浏览器已调整大小的情况下加载网页，则这种方法无效。任何想法如何应用CSS更改负载？非常感谢 – ghilton

一旦你找到了你的断点，其中出现重叠时，您可以使用像这样覆盖较窄的浏览器视窗：

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

来源

2013-10-18 16:51:44 cimmanon

最简单的方法是使用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

来源

2013-10-23 12:56:06

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

回答

相关问题