将图像锁定/固定到背景图像上的精确点

时间:2016-08-07 23:30:28

标签: css3

我正在尝试将图像设置为指向背景图像上精确点的链接。我需要图像链接保持在背景图像上的相同空间并且响应。

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

1 个答案:

答案 0 :(得分:0)

我可以给你两种方法来解决这个问题,因为我之前使用过它们:

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)*/
}

记住:为了定位工作,你必须将元素设置为position:fixed / absolute / relative。

希望我帮帮忙。如有疑问,请问我!