在更改屏幕尺寸的同時，背景變得更小，並且divs在彼此之下變得更小

正如您從標題中可以看到的，我有兩個問題。第一個問題很簡單，我有後臺這個CSS代碼：在更改屏幕尺寸的同時，背景變得更小，並且divs在彼此之下變得更小

body{ 
display:block; 
background:url(file:///C:/Users/Abdallah/Desktop/Background%20images/Fotor0512155059.jpg); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position-y:27px; 
margin:0; 
}

所有我想要的是，當我得到的屏幕較小（CTRL - ）背景保持全屏幕上，並沒有得到小，所以會有白色的空間。第二個問題也很簡單。我有一些互相靠近的div，我希望當屏幕更大時（CTRL +），divs保持彼此靠近，並且不會互相碰撞。如果你的屏幕比較小（CTRL +），那麼黑色的盒子就會變得更小，如果你把屏幕變小（CTRL - ），背景會變小，你可以看到空白區域。有什麼建議嗎？

來源

2013-05-13 Mhmd Robaee

請問您可以用[小提琴]（http://jsfiddle.net）提供您的問題的演示嗎？ – Bigood 2013-05-13 11:19:50

下面是一個例子（http://jsfiddle.net/njmFT/），如果你將屏幕變大（CTRL +），黑盒子變得相互依賴，如果屏幕變小（CTRL-），背景變小，你可以看到空白。 – 2013-05-13 11:32:41

在回答你的第一個問題，我想你可能會尋找

body{ 
    padding:0; 
    margin:0; 
    background: #ffffff url(file:///C:/Users/Abdallah/Desktop/Background%20images/Fotor0512155059.jpg) no-repeat center top; 
    background-attachment:fixed; 
    background-size:cover; 
}

這是background-size屬性，在做業務，但要小心 - 通過瀏覽器的支持，僅僅是最近的事。

另外，當你上傳它時，請記住給我們一個絕對或相對的img資源URL，否則你會看到背景圖片，但你的訪問者不會！

立即處理您的第二個問題！

編輯。

OK ......你的第二個問題的一些想法

我認爲，如果你開始使用百分比，而不是固定的像素寬度爲您的箱子。嘗試類似

.box{ 
    background-color:#000; 
    width:20%; 
    padding:0; 
    margin:0 2%; 
    height:100px; 
    display:inline-block; 
}

順便說一句 - 你不應該使用多個相同的ID在同一頁面 - 使用class="box"和.box{}，而不是id="box"和#box{}

小提琴這裏 - http://jsfiddle.net/em5Ga/

對不起 - 壞鏈接小提琴 - 更新！

來源

2013-05-13 11:33:26 Doug

男人，非常感謝你，我理解你說的每一句話，你解決了我的問題100％謝謝！ – 2013-05-13 11:38:03

沒問題 - 很高興爲您服務。如果你不介意的話，接受並且贊成！ – Doug 2013-05-13 11:46:55

順便說一句，我編輯了你的身體標記，因爲你手動移動背景位置來彌補（我認爲）身體填充，這可能很容易從瀏覽器到瀏覽器。如果你不需要，最好練習簡單的'關閉'邊距*和*填充整個身體標記。實際上，有些人喜歡用'html，body {padding：0; margin：0}' – Doug 2013-05-13 11:50:36

在更改屏幕尺寸的同時，背景變得更小，並且divs在彼此之下變得更小

回答

相關問題