Question

我希望笑脸div（在用户进入墙壁后显示）将覆盖主迷宫表面而不改变笑脸尺寸：你能帮帮我吗？

是笑脸divs：

#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

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

此外，550px和margin-top不是必需的（我猜它们最初只用于将灰色区域居中到中间位置。）

top

编辑：为#highlight_lose { height: 550px; width: 100%; position: absolute; display: block; background: gray; }更改下面的CSS，以确保笑脸没有拉伸的外观。

div.sad_smileyface

Demo Fiddle

扩大div表面而不改变元件尺寸本身

1 个答案: