Html 如何使背景图像在不丧失响应能力的情况下正确嵌入电路板
我有一个代码，其中有一个类框，我给Html 如何使背景图像在不丧失响应能力的情况下正确嵌入电路板,html,css,Html,Css,我有一个代码，其中有一个类框，我给类框框1提供了背景图像 我的问题是图像没有正确安装到电路板内部 当我重新调整窗口时，它正在向上移动 如何纠正它 如何使图像正确安装在电路板内部而不丢失响应能力 这就是实现这一点的方法，当我试图使其适合于板内时，它不仅适合于盒内，而且失去了响应能力 当我尝试调整窗口大小时，窗口中的图像会向上移动 html，正文{ 背景图片：url(https://i.ibb.co/K7mpxZG/background9.jpg); 背景重复：无重复； 背景尺寸：封面； 宽度：1
类框框1背景图像
我的问题是图像没有正确安装到电路板内部
当我重新调整窗口时，它正在向上移动
如何纠正它
如何使图像正确安装在电路板内部
而不丢失响应能力
这就是实现这一点的方法，当我试图使其适合于板内时，它不仅适合于盒内，而且失去了响应能力
当我尝试调整窗口大小时，窗口中的图像会向上移动
html，正文{
背景图片：url(https://i.ibb.co/K7mpxZG/background9.jpg);
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
身高：100%；
溢出：隐藏；
背景尺寸：100vw 100vh；
}
#框1{
位置：绝对位置；
顶部：55.3vh；
左：-19.98vw；
光标：指针；
边框：px实心#0066CC；
背景重复：无重复；
背景尺寸：封面；
}
#框1 p{
宽度：10.0vw；
高度：1.0vh；
边界半径：25%；
}
#容器{
空白：nowrap；
边框：px实心#CC0000；
}
康奈尔先生{
边框：px实心#FF3399；
}
.集装箱2{
宽度：50.1vw；
位置：固定；
顶部：10.5vh；
左：30.5vw；
}
.方框p{
字体大小：calc（2vw+10px）；
}
.隐藏{
可见性：隐藏；
}
p{
字体：“Courier New”，Courier，monospace；
字体大小：5vw；
颜色：蓝色；
文本对齐：居中；
}
如果您希望图像覆盖其容器，可以使用背景尺寸：覆盖,
如果要确保显示整个图像（但如果需要调整大小），可以使用background size:contain
以上两项要求在类框1
中明确宽度和高度我建议您根据您的要求为您的身体设置背景位置。通常，居中是最佳选择：
background-position: center center;
您可以通过查看代码段来了解它的工作原理。通过右下角的控制柄调整图像大小
div{
背景图像：url（'//unsplash.it/500'）；
背景尺寸：封面；
背景位置：中心；
调整大小：两者；
溢出：自动；
宽度：100%；
高度：200px；
}
我认为你处理这个问题的方法不对。我将从主背景中提取board元素，并将其单独用作元素：
html{
背景:#afffdc；
}
#容器{
位置：固定；
底部：0；
左：100px；
背景：url(https://i.stack.imgur.com/CM15R.jpg)顶部/不包含重复项；
高度：50vh；
宽度：29vh；
最大宽度：20vw；
最大高度：35vw；
}
.盒子{
填充顶部：173%；
背景：url(https://picsum.photos/200/300)50%5%/86%27%不重复；
}
尝试将背景大小设置为封面
或包含
中的一个，然后查看您选择的背景大小prefer@jhecht我已经设置了#box1:background size:contain
；但不是working@jhecht#框1：背景尺寸：`封面<代码>；工作正常，但图像向上移动`当我重新打开窗口
时
如何纠正它
？我建议不要使用背景图像，而是尝试在css中创建该板。谢谢这可能会导致其他元素的行为异常。谢谢。这不是正确的方法。。您应该使用另一种方法来实现这一点。谢谢，我看到你的棋盘是你身体类背景的一部分，当你调整窗口大小时，背景图像会变小，但棋盘上图像的大小不会改变。我会建议你把板作为一个单独的图像拿出来。当我给出背景位置时：中间
到body当我重新缩放窗口时，图像仍在向上移动50%5%86%27%