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. 如果您想在图像顶部放置内容，您可以定位它 绝对的。