HTML和CSS中的图像定位

Question

我是这个论坛的新手，但是我对网页设计也很陌生，但是我需要创建一个网站，而且我无法弄清楚如何使用html和css编写特定的布局。

我正在使用Dreamveawer CC。 我有一个背景图片，需要填满整个屏幕。 为此，我使用了一个代码：

    html {background: url(images/bgimg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
  background-size: cover;
}

这似乎是行得通的，因为我需要随着屏幕尺寸缩小图像-因为该站点需要响应并适合平板电脑和移动设备视图等。

我遇到的问题实际上是图像，因为它们需要散布在整个屏幕上，它们还需要对屏幕尺寸做出响应，并与平板电脑视图的背景图像一起缩小。 （对于移动视图，图像变成图标大小并按行对齐）。

我不知道如何将图像准确地定位在我想要的位置，以及如何根据屏幕的大小将其移动和缩小，一直到平板电脑的大小？

我使用以下方法创建了一个容器：

<div class="Container"></div>


.Container {
height: 800px;
width: 100%;
margin: 10px auto;
background: #5780E8;
}

我也不知道这是否是正确的尺寸。 但这似乎与屏幕尺寸有关。 我以为可以将图像放在此容器中。

示例图片：

Answer 1

根据需要使用background-position属性定位图像。 我仍然认为将背景图像用于此目的不是很好，因为您要在视口更改时调整图像的大小。

1. 尝试对图像使用<img>标签。
2. 使用图像内的<source>标签基于视口切换多个图像。
3. 如果要在图像顶部显示内容，可以将其放置在绝对位置。