Question

我无法找到让内容与背景图片上的特定点对齐的方法（不像某些解决方案那样居中，但是例如将H1放在门口（在背景图片上）75沿着照片的方式的百分比，以便当使用浏览器窗口/设备调整响应图像/背景时，H1保持与图像上的完全相同的点对齐。

我的网页使用类似于sixrevisions.com上的代码的全屏响应背景：

body {
  /* Location of the image */
  background-image: url(images/background-photo-mobile-devices.jpg);

  /* Image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Image doesn't repeat */
  background-repeat: no-repeat;

  /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;

  /* Pick a solid background color that will be displayed while the background image is loading */
  background-color:#464646;

  /* SHORTHAND CSS NOTATION
   * background: url(background-photo.jpg) center center cover no-repeat fixed;
   */
}

重复搜索已经给出了数百个不相关的结果，很多人（例如：在上面的例子中）通过将文本居中到中心BG来解决这个问题，但这是解决定位文本，以便当窗口大小改变时，元素的位置与实际BG图像上的某个特定非中心点保持对齐。

我通过反复试验发现绝对位置对我不起作用，因为我将元素对齐到窗口中的一个点，当然这个点不会缩放到任何一个点特定的宽高比，而BG图像与窗口稍微缩放，但正确地保持在特定的宽高比。

我的研究引导我到各地，从响应式图像映射＆＃39;价格在100美元到200美元之间的JS解决方案，似乎在浏览器支持等方面存在潜在困难的SVG图像映射解决方案.SVG图像映射让我感兴趣，因为它似乎是一种方式来提供与浏览器调整大小背景对齐的锚点上方。

http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG

然而，这是一个解决方法＆＃39;至多＆＃39;我需要定位的只是文本和简单的锚点。如果我无法解决它，我会将文本集成到jpg并使用svg图像映射，但他不是SEO友好或良好的语义设计。不幸的是，我已经有好几天没时间工作了。

我发现这相关但不是解决方案： https://css-tricks.com/absolute-positioning-inside-relative-positioning/

如果我能提供任何进一步的澄清，请告诉我。

如何定位内容以与响应式背景图像对齐？

0 个答案: