Question

我尝试在背景图像上放置一个容器。该容器的内容将是图像。不幸的是，如果我调整浏览器窗口的大小，我就无法将容器粘到背景图像上。

容器是否总是停留在同一个地方，但也与背景图像一起缩放？让我们说背景图像是1000x1000px，顶部的容器是500x500。在较小的浏览器上，图像缩小至500x500px。现在容器及其内容也应缩小50％，但应保持在同一位置。

这是我到目前为止（它只是一个例子）：

＆＃13;

body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-sarif; font-size: 10px;  }

#background_image { 
background-image: url("http://ws2-media1.tchibo-content.de/newmedia/art_img/MAIN_ALT_3-IMPORTED/4113906f0b0eab32/regal-weiss.jpg"); 
max-width: 55.3em; 
width: 100%;
max-height: 47.1em;
height: 100%;
background-size:contain; 
background-repeat: no-repeat; } 

#container { background-color: #FF0004;  max-width: 5em; width: 100%; max-height: 5em; height: 100%; position: relative; left: 40%; top: 55%; }

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unbenanntes Dokument</title>

<style>



</style>

</head>

<body>

<section id="background_image"> 

<div id="container"></div>

</section>

</body>
</html>

＆＃13;

非常感谢你。

Answer 1

我要做的是媒体查询

@media screen and (min-width: 480px) {
  #background_image{
   }

  #container {

    }
}

取决于您需要定位#container的屏幕大小并给出#background_image的正确宽度

这是我学习的地方 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

是否可以将<div>容器及其内容与背景图像一起粘贴？

1 个答案: