Css 当改变屏幕大小时，背景变小，div互相压在一起

正如你从标题中看到的，我有两个问题。 第一个问题很简单，我有以下css代码作为背景：

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+）时，div保持彼此靠近，而不是在彼此下面

下面是一个例子（），如果你让屏幕变大（CTRL+），黑匣子会在彼此下面，如果你让屏幕变小（CTRL-），背景会变小，你可以看到空白。

---

有什么建议吗？

回答你的第一个问题，我想你可能在寻找

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

正是

背景大小

属性在起作用，但要小心-通过浏览器提供的支持只是相对较新的

此外，请记住，当您上传img资源时，请给我们一个绝对或相对的URL，否则您将看到背景图像，但您的访问者不会看到

正在解决第二个问题

编辑

好的。。。关于第二个问题的一些想法

我认为如果你开始使用百分比而不是固定的像素宽度为你的方块。试试像这样的东西

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

顺便说一句-您不应该在同一页中使用多个相同的id-使用

class=“box”

和

.box{}

而不是

id=“box”

和

#box{}

在这里拉小提琴-

---

抱歉-错误链接到小提琴-更新

你能演示一下你的问题吗？下面是一个例子（）如果你把屏幕变大（CTRL+），黑匣子就会互相压在一起，如果你把屏幕变小（CTRL-），背景就会变小，你可以看到空白。老兄，非常感谢你，我听懂了你说的每一句话，你100%解决了我的问题，谢谢！没问题-很高兴为您服务。如果你不介意，请接受并投票！顺便说一句，我编辑了你的身体标签，因为你正在手动移动背景位置，以补偿（我认为）身体填充，这可能很容易因浏览器而异。如果你不需要的话，最好是简单地“关闭”全身标签的边距和填充。事实上，有些人喜欢从

html开始，body{padding:0；margin:0}

关于第二个问题，您也可以尝试

空白：nowrap；溢出：自动

CSS关于

body

。对于第二个问题，我遇到了一些问题。实际上它不是原始代码，我的divs的原始代码包含填充和边距，因此我不能将其设置为不同的值，这是我的代码：

.menutext{字体系列：Helvetica neue，Helvetica，Arial，Verdana，无衬线；字体大小：16；显示：内联块；边框：纯色；边框颜色：aaa#ccc；边框宽度：0 0 5 6；填充：6 40 7 40；边距：7 15；方框阴影：-1px 2px 5px#404040；}

/