谁能来帮我拯救一下这个:为什么灯笼不能置顶,文字不能放在灯笼中间??还有,我想把底下的小鸡放大怎么办?
*{
margin: 0;
padding: 0;
border: none;
font-size: 1.5625vw;
font-family: "Microsoft Yahei";
}
/* music */
#music{
position: fixed;
top: 3vh;
right: 4vw;
z-index: 5;
width: 15vw;
height: 15vw;
margin: auto;
border: 4px solid #ef1639;
border-radius: 50%;
background: #fff;
}
#music > img:first-of-type {
position: absolute;
top: 24%;
right: 2.5%
width:28.421%;
margin: auto;
}
#music > img:last-of-type {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/* page bg*/
.page {
position: absolute;
width: 100%;
height: 100%;
}
.page > .bg {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
/* page1 */
#page1 {
display: block;
}
#page1 > .bg {
background: url("H:/小小移动端/image/p1_bg.jpg") no-repeat center center;
background-size: 100%;
}
#page1 > .p1_lantern {
position: absolute;
top: -10%;
right: 0;
left: 0;
margin: auto;
background: url("H:/小小移动端/image/p1_lantern.png") no-repeat center bottom;
width: 45vw;
height: 71.2vh;
font-size: 3.506rem;
padding-top: 31vh;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#page1 > .p1_lantern:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: "";
margin: auto;
width: 30vw;
height: 30vw;
background: #d60b3b;
opacity: .5;
border-radius: 50%;
-webkit-box-shadow: 0 0 10vw 10vw #d60b3b;
-moz-box-shadow: 0 0 10vw 10vw #d60b3b;
-ms-box-shadow: 0 0 10vw 10vw #d60b3b;
-o-box-shadow: 0 0 10vw 10vw #d60b3b;
box-shadow: 0 0 10vw 10vw #d60b3b;
}
#page1 > .p1_gj {
position: absolute;
right: 0;
bottom: 9vh;
left: 0;
background: url("H:/小小移动端/image/p1_gj.png") no-repeat center center;
background-size: 100px;
width: 27.656vw;
height: 23vh;
margin: auto;
}
#page1 > .p1_words {
font-size: 2.4rem;
position: absolute;
right: 0;
bottom: 48px;
left: 0;
text-align: center;
color: black;
}