Question

我正在尝试使用HTML / CSS创建一个具有以下内容的网页：

所有页面上的背景图片
在背景图像中，有一个图像对应于一个具有厚度的圆
圆圈中有徽标和文字（文字必须居中）

当我们在移动页面上查看文字时，圆圈/徽标和文字必须具有响应性，圆圈必须走到外面

我第一次尝试了无响应页面，但我只是意识到这不好，因为在全屏页面上，文本不再位于圆圈中，并且圆圈不在页面中心移动

这是我的无效代码您能帮我完成此任务并提供响应页面吗？

html {
  margin: 0;
  padding: 0;
  background: url(img/fond.jpg) center fixed;
  -webkit-background-size: cover;
  /* pour anciens
    Chrome et Safari */
  background-size: cover;
  /* version standardisée
    */
}

.imageLogo {
  position: absolute;
  top: 473px;
  left: 592px;
}

.textAuCentreImage {
  margin-top: -780px;
  text-align: center;
  padding-left: 181px;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
  <img src="img/cercle.png">
  <img src="img/logo_fe.png" class="imageLogo" />
  <div class="textAuCentreImage">
    <FONT face="Calibri" color="#2d314f">
      <h3>Hello<br>
      </h3>
      <br>
      <br>
      <br> Here is my first page<br> HTML
      <br>
    </FONT>
  </div>
</body>

</html>

该页面全屏显示

移动屏幕上有该页面

谢谢

如何制作此网页（图像包含图像？

0 个答案: