如何固定/锁定背景图片和图片的位置包含图片的Divs [英] How to Fixed / Lock Position of Background Image & Divs Containing Images
问题描述
我有一个地图图像(1080x1080px)，我希望它是主体或容器div的背景.即使调整浏览器窗口的大小，我也需要始终将图像固定在其位置.
I have a map image (1080x1080px) I want this to be the the background of the body or a container div. I need the image to stay fixed in its place always, even when resizing the browser window.
我在主div容器内有div，这些div的图像是地图标记，这些图像已放置在特定位置，并且可以根据需要进行切换.
I have divs inside of the main div container and these divs have images which are map markers that have been places at specific locations and they are toggled on and off as required.
背景图像(地图)和标记都需要永久保持在其位置.
Both the background image (map) and the markers need to stay in their position permanently.
我该如何实现?我所拥有的不起作用...
How can I achieve this? What I have is not working...
body, html {
height: 100%;
}
#bg {
background-image: url(treasuremap_01.jpg);
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
display: block;
width: 100px;
}
input:checked + .hidable {
display: none;
}
input:not(:checked) + .showable {
display: none;
}
#mark01 {
position: absolute;
top: 240px;
right: 490px;
}
#mark02 {
position: absolute;
top: 480px;
left: 460px;
}
#mark03 {
position: absolute;
bottom: 260px;
right: 490px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>
<div id="bg">
<div id="menu">
<input type="checkbox" /> Marker 1
<div class="showable"><img id="mark01" src="xmark_01.png" alt="X Mark Red"></div>
<input type="checkbox" /> Marker 2
<div class="showable"><img id="mark02" src="xmark_02.png" alt="X Mark Green"></div>
<input type="checkbox" /> Marker 3
<div class="showable"><img id="mark03" src="xmark_03.png" alt="X Mark Magenta"></div>
</div>
</div>
</body>
</html>推荐答案
您需要将 width 和 height 的 #bg 属性设置为与背景图片大小相同.
You need to set the #bg property of width and height the same as the background-image size.
body, html {
height: 100%;
}
#bg {
background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
height: 1080px;
width: 1080px;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
display: block;
width: 100px;
}
input:checked + .hidable {
display: none;
}
input:not(:checked) + .showable {
display: none;
}
#mark01 {
position: absolute;
top: 240px;
right: 490px;
}
#mark02 {
position: absolute;
top: 480px;
left: 460px;
}
#mark03 {
position: absolute;
bottom: 260px;
right: 490px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>
<div id="bg">
<div id="menu">
<input type="checkbox" /> Marker 1
<div class="showable"><img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png" alt="X Mark Red"></div>
<input type="checkbox" /> Marker 2
<div class="showable"><img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png" alt="X Mark Green"></div>
<input type="checkbox" /> Marker 3
<div class="showable"><img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png" alt="X Mark Magenta"></div>
</div>
</div>
</body>
</html>这篇关于如何固定/锁定背景图片和图片的位置包含图片的Divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
