Html 在图像上浮动文字并做出响应？_Html_Css

Html 在图像上浮动文字并做出响应？

html css

Html 在图像上浮动文字并做出响应？,html,css,Html,Css,我试图在我的背景图像上获得一个表单，但仍然可以正确地调整它的大小（即使我必须进行媒体通话）。我已经能够让它在正确的位置，但不是当我调整窗口的大小我有这个html： <html><head> ... links and js </head> <body> <header></header> <main role="main"><div id="home-page-wrap"> <div

我试图在我的背景图像上获得一个表单，但仍然可以正确地调整它的大小（即使我必须进行媒体通话）。我已经能够让它在正确的位置，但不是当我调整窗口的大小

我有这个html：

<html><head>
... links and js
</head>
<body>
<header></header>
<main role="main"><div id="home-page-wrap">
    <div class="container-fluid">
      <img id="full-notebook" class="notebook-img" src="/assets/full-notebook-4408c34201b7213bbdc584452ea7365f.png" alt="Full notebook">
      <div class="container-fluid">
        <div class="col-xs-8 col-sm-6 col-lg-4 col-sm-offset-3 col-xs-offset-1 col-lg-offset-4" id="menu-wrap">
          <div id="main-page-form-wrap">
            <form id="main-page-form">
              <h2 id="menu-head">
                COMPOSITION
              </h2>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div></main>

</body></html>


... 链接和js
作文

这是我的图像（800x1054，但我可以调整大小），我正在尝试在笔记本的白色部分创建一个表单：

如果有帮助的话，我也可以将白色部分创建为单独的元素

又加了一把小提琴：我的小提琴并不是什么都给

添加了引导层：

尝试一下：

#main-wrap {
    width: 100%;
    height: 100%;    
}
#main-wrap img, #main-wrap h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
#main-wrap h2 {
    top: 200px;
    padding-left: 4em;
}

您的笔记本图像现在包含在一个

标签中，我正在通过变换绝对定位所有内容，这确保了居中。

h2

有一些填充，如果您更改字体大小，这些填充应该可以缩放

我也相信绝对定位将是您在这里的最佳选择。如果你想要一个流畅的布局，我会选择百分比而不是像素

为了获得最佳响应效果，我将背景设置为实际图像，并将其宽度设置为100%，高度设置为自动。这样，它将始终覆盖其父对象的整个宽度，并保持纵横比

然后你必须以百分比计算白色正方形的位置。下图说明了这是多么容易

然后，只需使用这些百分比来定位表格：

#main-wrap form {
    position: absolute;
    top: 14.7%;
    left: 27.5%;
    width: 55.6%;
    height: 22.9%;
}

这是最新的提琴（在表格周围有一个红色的轮廓来演示）。调整它的大小，表单应该保持在原来的位置。请注意，您可能需要在小屏幕上选择一种替代布局，因为表单将变得非常小，并且对用户不友好

您是否尝试过将图像设置为窗体的背景并将其放置在中心位置？我有，但我想我必须调整y坐标（其位于黑色部分）。您能拨动它吗？我做了一些更改尝试一下显然，我的拨动器没有将图像居中。。。我做了一个引导（因为我使用的是引导）。