0

从标题可以看出我有两个问题。第一个问题很简单，我有这个背景的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 彼此靠近，并且不会彼此靠近。

这是示例（http://jsfiddle.net/njmFT/），如果您将屏幕变大（CTRL +），黑框将彼此下方，如果您将屏幕变小（CTRL -），则背景会变小，您可以看到白色空间。有什么建议么？

4

1 回答 1

1

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

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，否则您会看到背景图片，但访问者不会！

现在解决你的第二个问题！

编辑。

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

我想如果你开始为你的盒子使用百分比而不是固定的像素宽度。尝试类似的东西

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

顺便说一句 - 您不应该在同一页面中使用多个相同的 ID - 使用class="box"and.box{}而不是id="box"and#box{}

在这里小提琴 - http://jsfiddle.net/em5Ga/

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

于 2013-05-13T11:33:26.937 回答