css - 将图像锁定/固定到背景图像上的确切位置

Question

我正在尝试将图像设置为指向背景图像上确切位置的链接。我需要图像链接保留在背景图像上的相同空间中并具有响应性。

我正在使用 html 和 css，对任何其他编程语言知之甚少。我正在尝试使用固定的背景图像和四个图像作为具有绝对位置值的链接，但是当我更改浏览器窗口时图像链接会四处移动。有什么建议么？谢谢!

Answer 1

我可以给你 2 种方法来解决这个问题，因为我以前用过它们:

1:使用所有测量值的百分比:

这实际上不是响应式的，而是属于流体布局的概念。这意味着它总是会以任何尺寸填充它可以填充的整体。

2:使用媒体查询:

这被认为是响应式的，因为在每次调整键大小时它都会改变您的定位:

@media (max-width: 1200px) {
  .element {
    /*INSERT POSITIONING STYLES HERE (POSITIONING[top, right, bottom, left])*/
  }
}

.element {
  /*INSERT DEFAULT STYLING HERE (COLORS, DISPLAY MODE, VISIBILITY, OPACITY)*/
}

记住:为了使定位起作用，您必须将元素设置为定位:固定/绝对/相对。

希望我能帮到你。如有疑问，请问我!