Question

我正在尝试使用背景图片和顶部的div创建一个简单的响应式启动页面。我已设法获得响应式背景图像。这很好用。现在我有问题在这个背景上放置一个div并确保它正确地调整大小。

我为这个div设置了百分比边距，但它不保持百分比，如果我让窗口太小，那么div就会完全消失。

如何解决此问题？

非常感谢你的帮助。

纪尧姆

我的HTML：

<div id="bg">
  <img src="http://b-tees.net/wp-content/uploads/2014/08/london.jpg" alt="">
</div>
<div id="selector">
<?php do_action('icl_language_selector'); ?>
</div>

我的CSS：

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

#selector {
position:absolute;
margin-top:10%;
margin-left:10%;
}

Answer 1

我的建议是这样使用： Demo

而不是你现在使用的方法

<强> CSS：

html, body {
    min-height: 100%;
    height: 100%;
    padding:0;
    margin:0;
}
.bg_img {
    background:url("http://b-tees.net/wp-content/uploads/2014/08/london.jpg") no-repeat center top fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height:100%;
}
#selector {
    display:block;
    vertical-align:middle;
    text-align:center;
    margin:0 auto;
    width:50%;
}

<强> HTML：

<div class="bg_img">
    <div id="selector">Test test test..   
    </div>
</div>

div在响应的背景图像之上

1 个答案: