javascript - 在不改变元素大小本身的情况下扩大 div 表面

Question

我希望笑脸 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);
}

Answer 1

你只需要将 #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);
}

Demo Fiddle