老师，请解释一下这个背景图设置为center top的原因？
设置了dog的top之后，背景图片下部会出现空白？为什么 <!DOCTYPE html> <html lang="en"> <head> <title>Hank Dog</title> <meta charset="utf/8"> <link href="hankdog.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="dog center"> <!-- 额头 --> <div class="forehead center"></div>、 <!-- 脸部 --> <div class="face center"></div> <!-- 下巴 --> <div class="chin center"></div> <!-- 左耳朵 --> <div class="ear"></div> <!-- 右耳朵 --> <div class="ear right"></div> <!-- 眼部标记 --> <div class="birthmark"></div> <!-- 左眼睛 --> <div class="eye"> <!-- 眼球 --> <div class="eyeball"></div> </div> <!-- 右眼睛 --> <div class="eye right"> <!-- 眼球 --> <div class="eyeball"></div> </div> <!-- 鼻子 --> <div class="nose center"> <!-- 左鼻孔 --> <div class="nostril"></div> <!-- 右鼻孔 --> <div class="nostril right"></div> </div> <!-- 嘴巴 --> <div class="mouth center"> <!-- 左边牙齿 --> <div class="tooth"></div> <!-- 右边牙齿 --> <div class="tooth right"></div> <!-- 舌头 --> <div class="tongue center"></div> </div> <!-- 身体部分 --> <div class="body center"> <!-- 左胳膊 --> <div class="arm"></div> <!-- 右胳膊 --> <div class="arm right"></div> <!-- 左腿 --> <div class="leg"> <!-- 左脚 --> <div class="foot"></div> </div> <!-- 右腿 --> <div class="leg right"> <!-- 右脚 --> <div class="foot"></div> </div> <!-- 肚腩 --> <div class="belly center"></div> </div> </div> </body> </html>
/* 清除内外边距 */
*{
margin:0;
padding:0;
}
/* 根元素，统一设置样式 */
:root{
--hl: #1b2f90;
--bg: #f9f9f6;
--t: 1s;
}
body{
background: url("bg.png") no-repeat center top ;
background-size: 100% ;
}
/* 狗主体 */
.dog{
width: 300px;
height: 400px;
position: relative;
top:500px;
}
/* 设置居中 */
.center{
position: absolute;
left: 50%;/*右移父元素宽度的50% */
transform: translate(-50%,0); /*左移自身宽度的50%*/
}
/* 让耳朵显示在头部的下面 */
.forehead,.face,.chin{
z-index: 1;
}
/* 额头 */
.forehead{
width:102px;
height: 48px;
background: var(--bg) ;
border-radius: 51px/40px 40px 8px 8px;
}
/* 脸部 */
.face{
width: 110px;
height: 68px;
background: var(--bg);
border-radius: 50%;
top:20px;
}
/* 下巴 */
.chin{
width: 104px;
height: 36px;
background: var(--bg);
border-radius: 52px/0px 0px 36px 36px;
top:60px;
}
/* 左耳朵 */
.ear{
width: 16px;
height: 70px;
background: var(--hl);
border-radius: 50%;
position: absolute;
left: 50%;
top:34px;
transform-origin: 50% 0;/*因为设置了水平翻转，所以要设置翻转的中心*/
transform: translate(-42px,0) rotate(10deg);
z-index: 0;
/* 动画部分 */
animation:rotate var(--t) ease-out infinite;
}
/* 右耳朵 */
.ear.right{
transform:scale(-1,1) translate(-27px,0) rotate(10deg) ;
animation:rotate-r var(--t) ease-out infinite;
/* scale(-1,1)水平翻转 */
}
/* 眼部胎记 */
.birthmark{
width: 30px;
height: 36px;
background: var(--hl);
border-radius: 15px/17px 26px 2px 16px;
position: absolute;
left: 50%;
top: 10px;
z-index: 1;
transform: translate(17px,0) rotate(-10deg);
}
/* 左眼睛部分 */
.eye{
width: 24px;
height: 24px;
background: var(--bg);
border-radius: 12px/12px 12px 12px 2px;
position: absolute;
left: 50%;
top: 20px;
transform-origin: 50% 0;
transform: translate(-42px,0) rotate(10deg);
z-index: 2;/*眼睛在脸部上方，所以设置的z-index值要比较大*/
box-shadow: 1px 0 0 0 #000 inset, -1px 0 5px 1px #ccc;
/* 眼眶是不可以让眼球超出去的 */
overflow: hidden;
}
/* 右眼睛部分 */
.eye.right{
transform:scale(-1,1) translate(-21px,0) rotate(10deg) ;
box-shadow: 1px 0 0 0 #000 inset;
/* scale(-1,1)水平翻转 */
}
/* 眼球部分 */
.eyeball{
width: 26px;
height: 26px;
background: #e79101;
border-radius: 50%;
position: absolute;
left: 3px;
top:1px;
box-shadow: 0 0 5px 0 #000 inset;
/* 动画效果 */
animation: translate var(--t) ease-out infinite;
}
/* 眼球上面的白色和黑色部分。使用伪元素*/
.eyeball:before{
content:"";
display:block;
width: 18px;
height: 18px;
background: #000;
border-radius: 50%;
position: absolute;
top:50%;
left: 50%;/*右移父元素宽度的50% */
transform: translate(-50%,-50%); /*左移自身宽度的50%*/
}
.eyeball:after{
content:"";
display:block;
width: 5px;
height: 5px;
background: #fff;
border-radius: 50%;
position: absolute;
top:7px;
left: 4px;
}
/* 鼻子 */
.nose{
width: 62px;
height: 32px;
top:42px;
background: #373737;
border-radius: 31px/10px 10px 22px 22px;
z-index:3;
}
/* 鼻子上层的遮罩 */
.nose::before{
content: "";
display: block;
width: 60px;
height: 12px;
position: absolute;
top: 1px;
left: 50%;
transform: translate(-50%,0);
border-radius: 30px/10px 10px 3px 3px;
background: linear-gradient(10deg,#fff 0%, #fff 8%,#b1aeb1 15%, #b1aeb1 50%,#544d53 100%);
}
/*左 鼻孔 */
.nostril{
width: 15px;
height: 4px;
background: linear-gradient(0deg,#363035 0%, #000 100%);
position: absolute;
top: 20px;
left: 50%;
border-radius: 50%;
transform: translate(-20px ,0) rotate(30deg);
/* 动画部分 */
animation: resize var(--t) ease-out infinite;
}
/* 右鼻孔 */
.nostril.right{
transform: scale(-1,1) translate(-8px ,0) rotate(30deg);
}
/* 嘴巴 */
.mouth{
width: 68px;
height: 20px;
background: #671316;
border-radius: 34px/ 0px 0px 20px 20px;
z-index: 1;
box-shadow: 0 0 4px 0 #000 inset;
top: 70px;
animation: open var(--t) ease-out infinite;
}
/* 嘴巴上面的遮罩 */
.mouth::before{
content: "";
display: block;
width: 68px;
height: 7px;
background: var(--bg);
border-radius: 34px/0 0 7px 7px;
z-index:2;
}
/* 牙齿和舌头 */
.tooth{
width: 8px;
height: 3px;
background: var(--bg);
border-radius: 4px/0 0 0px 1px;
position: absolute;
left: 50%;
top: 6px;
transform: translate(-8px,0);
z-index: 1;
}
.tooth.right{
transform: scale(-1,1) translate(-1px,0);
}
.tongue{
width: 34px;
height: 14px;
background: #a2504f;
border-radius: 17px/0 0 7px 7px;
z-index: -1;
box-shadow: 0 0 4px 0 #111 inset;
top: -2px;
animation: extend var(--t) ease-out infinite;
}
/* 身体部分 */
.body{
width: 66px;
height: 70px;
background: var(--bg);
border-radius: 50%;
top:90px;
}
/* 胳膊 */
.arm{
width: 26px;
height: 40px;
background: var(--bg);
border-radius: 13px/15px 0 0 20px;
position: absolute;
top: 5px;
transform: translate(-7px,0) rotate(15deg);
}
/* 使用伪元素构造胳膊和身体之间的阴影 */
.arm::before{
content: "";
display: block;
width: 5px;
height: 28px;
border-radius: 5px/13px 0 0 5px;
box-shadow: -1px 0 0.5px 0 rgba(200,200,200,0.6);
position: absolute;
top: 10px;
left: 13px;
transform: rotate(1deg);
}
/* 右胳膊 */
.arm.right{
transform: scale(-1,1) translate(-46px,0) rotate(15deg);
}
/* 腿部的样式 */
.leg{
width: 29px;
height: 50px;
background: linear-gradient(-85deg,#ddd 0%, #ddd 1% ,#f9f9f6 20%,#f9f9f6 100%);
border-radius: 15px/13px 5px 10px 40px;
position: absolute;
top: 36px;
transform: translate(1px,0) rotate(1deg);
}
.leg.right{
transform: scale(-1,1) translate(-37px,0) rotate(1deg);
}
/* 脚部 */
.foot{
width: 29px;
height: 15px;
background: linear-gradient(-110deg,#ddd 0%, #ddd 10% ,#f9f9f6 20%,#f9f9f6 100%);
border-radius: 7px/10px 10px 4px 4px;
position: absolute;
left: 2px;
bottom: -10px;
}
/* 肚腩，为了遮盖腿部的阴影 */
.belly{
z-index: 2;
width: 52px;
height: 36px;
background: linear-gradient(0deg,#ddd 0%, #ddd 5%,#f9f9f6 20%,#f9f9f6 100%);
border-radius: 30px/0 0 36px 36px;
bottom: 0px;
}
/* 耳朵动画部分 */
@keyframes rotate{
form{
transform: translate(-42px,0) rotate(10deg) ;
}
50%{
transform:translate(-42px,0) rotate(30deg) ;
}
to{
transform:translate(-42px,0) rotate(10deg) ;
}
}
@keyframes rotate-r{
from{
transform:scale(-1,1) translate(-27px,0) rotate(10deg) ;
}
50%{
transform:scale(-1,1) translate(-27px,0) rotate(30deg) ;
}
to{
transform:scale(-1,1) translate(-27px,0) rotate(10deg) ;
}
}
/* 眼球动画部分 */
@keyframes translate{
from{
left:3px ;
}
50%{
left:5px;
}
to{
left:3px;
}
}
/* 鼻孔动画部分 */
@keyframes resize{
from{
height:4px ;
}
50%{
height:3px;
}
to{
height:4px;
}
}
/* 舌头动画部分 */
@keyframes extend{
from{
height:14px ;
}
50%{
height:25px;
}
to{
height:14px;
}
}
/* 嘴巴动画部分 */
@keyframes open{
from{
height:20px ;
border-radius: 34px/ 0px 0px 20px 20px;
}
50%{
height:16px;
border-radius: 34px/ 0px 0px 15px 15px;
}
to{
height:20px;
border-radius: 34px/ 0px 0px 20px 20px;
}
}14
收起
正在回答 回答被采纳积分+1
2回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星