我有一个带有背景图像的容器,背景图像上带有标记/“元素”。当我调整屏幕大小时,我需要将标记放在同一个位置。我试图让它响应,但当我调整窗口大小时,元素似乎没有坐在它们的位置上。
我知道这是因为背景图片移动了,我需要所有带有图片的元素都锁定在同一个位置。
http://codepen.io/Sonick/pen/huqrl
.container {
background: url("http://armsonick.zz.mu/Demos/ImageHost/images/1381607643scene1.png") no-repeat scroll center top transparent;
color: #000000;
height: 535px;
margin: 20px auto;
overflow: hidden;
position: relative;
width: 1030px;
}
.dialog {
background-color: rgba(163, 154, 77, 0.9);
color: #FFFFFF;
display: none;
height: 140px;
left: 343px;
line-height: 24px;
padding: 100px 30px;
position: absolute;
text-align: center;
top: 97px;
width: 280px;
z-index: 10;
-moz-border-radius: 170px;
-ms-border-radius: 170px;
-o-border-radius: 170px;
-webkit-border-radius: 170px;
border-radius: 170px;
}
.dialog .close {
color: black;
background-color: #65683b;
cursor: pointer;
font-size: 22px;
font-weight: bold;
height: 36px;
line-height: 36px;
position: absolute;
right: 10px;
top: 60px;
width: 36px;
-moz-border-radius: 18px;
-ms-border-radius: 18px;
-o-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
}
.labels p {
display: none;
}
.labels div {
background-color: rgba(203, 189, 58, 0.8);
color: #FFFFFF;
display: none;
height: 50px;
padding: 30px 0 0;
position: absolute !important;
text-align: center;
text-decoration: none;
width: 80px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.labels > div {
background-color: rgba(203, 189, 58, 0.8);
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
.labels div:hover {
background-color: rgba(128, 128, 128, 0.8);
}
.labels div span {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid rgba(203, 189, 58, 0.8);
bottom: -14px;
height: 0;
left: 30px;
position: absolute;
width: 0;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
.labels div:hover span {
border-top: 15px solid rgba(128, 128, 128, 0.8);
}
#label1 {
left: 720px;
top: 215px;
}
#label2 {
left: 495px;
top: 290px;
}
#label3 {
left: 450px;
top: 115px;
}
#label4 {
left: 270px;
top: 170px;
}
#label5 {
left: 570px;
top: 65px;
}
#label6 {
left: 275px;
top: 30px;
}
最佳答案
问题是 body
的背景——div
元素被设计成对齐的——是居中对齐的,而 absolute
code> 这些 div 的定位只能从包含 div 的顶部/左侧开始。这意味着当容器小于背景图像时,对齐将关闭。
相反,您需要将背景图像与 div
元素对齐到相同的 anchor 才能工作; 顶部
/左侧
:
body {
background: url(http://pcvector.net/uploads/demo/scripts/layout_and_interface/isometric_interactive/images/scene.jpg) left top no-repeat;
}
关于javascript - 调整屏幕大小时如何使元素停止移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33895873/