我希望笑脸 div
(在用户进入墙壁后显示)将覆盖主迷宫表面而不改变笑脸大小:你能帮帮我吗?
这是 fiddle 链接: http://jsfiddle.net/uqcLn/66/
这是笑脸 div:
#highlight_lose {
height: 300px;
width: 100%;
position: absolute;
top: 50%;
margin-top: -150px;
display: none;
}
div.sad_smileyface {
width: 300px;
height: 100%;
position: relative;
margin: 0 auto;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}
最佳答案
你只需要将 #highlight_lose
的 height
从当前的 300px
更改为 550px
(迷宫的高度)。
此外,margin-top
和 top
也不是必需的(我猜它们最初仅用于将灰色区域居中到中间)。
#highlight_lose {
height: 550px;
width: 100%;
position: absolute;
display: block;
background: gray;
}
编辑:如下更改 div.sad_smileyface
的 CSS 以确保笑脸看起来没有拉伸(stretch)。
div.sad_smileyface {
width: 300px;
height: 300px; /* modified from 100% to 300px because 100% would now mean 550px whereas initially it would have been just 300px */
top: 25%; /* added this to position the smiley face at middle */
position: relative;
margin: 0 auto;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}
关于javascript - 在不改变元素大小本身的情况下扩大 div 表面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19298296/