如何根據瀏覽器/屏幕的寬度更改「背景位置」

我已經創建了我正在嘗試解決的問題的簡化版本。請看一看如何根據瀏覽器/屏幕的寬度更改「背景位置」

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

如何根據瀏覽器/屏幕的寬度更改「背景位置」

回答

相關問題