javascript - 如何在响应式背景上调整 div

Question

最近，我正在寻找一种方法来做到这一点:

我有一些包含背景图片的 html。由于 background-size: cover; 规则，这张图片是响应式的/它在调整大小时缩放。但是在这个 Html 中(使用 position: relative 规则)我有一些 div 应该有宽度，高度和位置来覆盖其中一台笔记本电脑(在我的图像顶部图像中)

问题是，即使我使用百分比或 vw 或 vh 规则，在调整大小后，这个元素永远不会适合笔记本电脑(在图像屏幕 2 和 3 上)。

所以我的问题是 - 这可能吗？如果是，我可以使用所有可能的技术(javascript、css3)来存档此效果。此外，div 还应更改尺寸以适合其中一台笔记本电脑。

感谢您的建议。

背景大小 100% 100% 会压扁图像。

Answer 1

您可以尝试使用 % 作为 background-size 属性

示例:

div{
   background-size:100% 100%;
   background-repeat: no-repeat;
}

你也可以试试background-attachment属性

这是关于 CSS3 background-size 的详细信息属性