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_lose300px550px

また、margin-topとtopは必須ではありません (最初は灰色の領域を中央に配置するためだけに使用されていたと思います)。

#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 に答える