0

我希望笑脸div（在用户进入墙壁后出现）将覆盖主迷宫表面而不改变笑脸的大小：你能帮帮我吗？

这是小提琴链接：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);
}
4

1 回答 1

1

您只需要将height的#highlight_lose从当前更改300px为550px（迷宫的高度）。

此外，margin-topandtop不是必需的（我猜它们最初仅用于将灰色区域居中到中间）。

#highlight_lose {
    height: 550px;
    width: 100%;
    position: absolute;
    display: block;
    background: gray;
}

编辑：更改您的 CSS 如下，div.sad_smileyface以确保笑脸没有拉伸的外观。

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);
}

演示小提琴

于 2013-10-10T14:44:42.903 回答