刚开始接触移动端制作,其中遇到的问题:
在一个图片上定位另一个图片,兼容不同手机,解决方法是:
以下是我两个弹层的html代码:
<div class="newUser">
<div class="lay">
<!--<img src="../image/award/newUser.png" alt="">-->
<div class="chai"></div>
<div class="closePNG">
<img src="../image/award/closePNG.png" alt="">
</div>
</div>
</div>
<div class="alreadyOpen">
<div class="lay">
<!--<img src="../image/award/redMoney.png" alt="">-->
<div class="text"><span>50</span><img src="../image/award/yuan.png" alt=""></div>
<div class="btn">邀请好友一起领取红包</div>
<div class="closePNG">
<img src="../image/award/closePNG.png" alt="">
</div>
</div>
</div>
做法是给lay层将大图设置为背景,其大小为图片大小,然后需要定位的图片也设置背景图片相对于lay层定位,其大小为图片的大小:以下是css代码:
.newUser, .alreadyOpen {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .3);
display: none;
}
.newUser .lay {
position: relative;
background: url(../image/award/newUser.png) no-repeat;
background-size: 100% 100%;
width: 12.75rem;
height: 17.45rem;
top: 50%;
margin-top: -8.725rem;
left: 50%;
margin-left: -6.3725rem;
}
.newUser .lay .chai {
width: 3.8rem;
height: 4rem;
background-image: url(../image/award/chai.png);
background-size: 3.8rem 4rem;
background-repeat: no-repeat;
position: absolute;
left: 50%;
margin-left: -2rem;
bottom: 20%;
}
.newUser .lay .closePNG, .alreadyOpen .lay .closePNG {
width: 1.45rem;
height: 1.45rem;
position: absolute;
left:50%;
top: 100%;
margin-left: -.7rem;
margin-top: 1.35rem;
}
.alreadyOpen .lay {
display: none;
position: relative;
background: url(../image/award/redMoney.png)no-repeat;
top: 50%;
margin-top: -7.125rem;
left: 50%;
margin-left: -7.25rem;
background-size: 100% 100%;
width: 14.5rem;
height: 14.15rem;
}
.alreadyOpen .text {
font-size: 2.3rem;
position: absolute;
top: 50%;
left: 50%;
margin-top: -1rem;
margin-left: -1.8rem;
color: #cd992e;
}
.alreadyOpen .text img {
width: 0.95rem;
height: 0.95rem;
display: inline-block;
}
.alreadyOpen .lay .btn {
position: absolute;
bottom: 4%;
left: 50%;
margin-left: -5.9rem;
background-image: url("../image/award/inviteBtn.png");
width: 11.35rem;
height: 2.45rem;
background-size: 11.35rem 2.45rem;
background-repeat: no-repeat;
line-height: 2.45rem;
text-align: center;
color: #eb3b40;
font-size: 0.8rem;
}
来源:oschina
链接:https://my.oschina.net/u/2861795/blog/1793869