为什么背景没有覆盖？
朗拿度
2016-02-09 20:02
<!DOCTEPY html>
<html>
<head>
<meta charset="UTF-8">
<title>春节快乐</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="music">
<img src="123/music_pointer.png">
<img src="123/music_disc.png">
</div>
<div class="page" id="page1">
<div clas="bg"></div>
<div class="p1_lantern">点击屏幕<br></br>开启好运2016</div>
<div class="p1_dog"></div>
<div class="p1_words">2016年神烦狗贺新年</div>
</div>
<div class="page" id="page2">
<div clas="bg"></div>
<div class="p2_circle"></div>
<div class="p2_2016"></div>
</div>
<div class="page" id="page3">
<div clas="bg"></div>
<div calss="p3_logo></div>
<div calss="p3_title></div>
<div calss="p3_second></div>
<div calss="p3_first></div>
<div calss="p3_blessing></div>
</div>
</body>
</html>
/* all tag */
* {
margin: 0;
padding: 0
border: none;
font-size: 1.15625vw;
font-family: "Microsoft Yahei";
}
html,
body {
height: 100%;
}
/* music */
#music {
position: fixed;
top: 3vh;
right: 4vw;
z-index: 5;
width: 15vw;
height: 15vw;
border: 4px solid #ef1639;
border-radius: 50%;
background: #fff;
}
#music > img:first-of-type {
position: absolute;
top: 24%;
right :2.5%
width :28.421%;
}
#music > img:last-of-type {
position: absolute;
top: 0;
right :0;
bottom :0;
left: 0;
margin: auto;
width: 79%;
}
/* page bg */
.page{
height: 100%;
}
.page > .bg{
position: absolute;
width: 100%;
height: 100%;
}
/* page1 */
#page1 > .bg {
background: url("123/p1_bg.jpg") no-repeat center center;
background-size: 100%;
}
/* page2 */
page2 > .bg {
background: url("123/p2_bg.jpg") no-repeat center center;
background-size: 100%;
/* page3 */
page3 > .bg {
background: url("123/p3_bg.jpg") no-repeat center center;
background-size: 100%;
1回答
-
- arlenhui
- 2016-02-10 17:20:01
建议加一张图，就是你代码的效果，或者在runjs上弄个demo
HTML5+CSS3实现春节贺卡
110034 学习 · 450 问题
相似问题