Question

从标题中可以看出，我有两个问题。第一个问题很简单，我有这个背景的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 - ）时，背景会保持全屏并且不会变小，因此会有空白区域。第二个问题也很简单。我有一些divs彼此靠近，我希望当我让屏幕更大（CTRL +）时，div会保持彼此靠近并且不会相互影响。

这是一个示例（http://jsfiddle.net/njmFT/）如果你让屏幕更大（CTRL +），黑框会在彼此之下，如果你让屏幕变小（CTRL - ），背景会变小，你可以看到空白区域。有什么建议吗？

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

立即处理你的第二个问题！

EDIT。

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

我认为如果您开始使用百分比而不是固定像素宽度的盒子。尝试像

这样的东西

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

BTW - 您不应在同一页面中使用多个相同的ID - 使用class="box"和.box{}代替id="box"和#box{}

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

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

在改变屏幕尺寸的同时，背景变得更小并且div在彼此之下

1 个答案: