2013-10-04 2 views
0

Как добавить тень к фактической рамке экрана на html поверх другого контента? Если это невозможно, то тот же вопрос для рамки тела.Как добавить тень к фактической рамке экрана на html?

Это не работает:

body { 
    -webkit-box-shadow: inset 0 0 10px #0d1f2b; 
    -moz-box-shadow: inset 0 0 10px #0d1f2b; 
    -o-box-shadow: inset 0 0 10px #0d1f2b; 
    box-shadow: inset 0 0 10px #0d1f2b; 
} 

Это показывает, тень на экране рамки, но я могу прокрутить его вверх путем прокрутки содержимого страницы:

.screen { 
    position:absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    -webkit-box-shadow: inset 0 0 10px #0d1f2b; 
    -moz-box-shadow: inset 0 0 10px #0d1f2b; 
    -o-box-shadow: inset 0 0 10px #0d1f2b; 
    box-shadow: inset 0 0 10px #0d1f2b; 
} 

    <div class="screen"></div> 
+1

вы пытались сделать это положение: исправлен? –

+0

Joao, к сожалению, он не работает на iPad, когда клавиатура видна :(http://stackoverflow.com/questions/10659891/fixed-position-div-freezes-on-page-ipad – Dmitry

+0

проверить, может ли это помочь: http : //stackoverflow.com/questions/7970389/ios-5-fixed-positioning-and-virtual-keyboard –

ответ

0

enter image description here тело { -moz-бокс-тень: 0 0 45px 45px RGBA (50, 50, 50, 0,5) ;; -webkit-box-shadow: 0 0 45px 45px rgba (50, 50, 50, 0.5) ;; box-shadow: inset 0 0 15px 15px rgba (50, 50, 50, 0.5) ;; } примечание

: изменение значений в соответствии с вашими требованиями

+0

Это не работает. Вы пытались? – Dmitry

+0

его работа в том случае, когда вы прокручиваете любой div внутри тела страницы .. и я думал, что вы хотите css для тела не для вашего div ... вот почему предоставили решение ... –

+0

Но я не вижу тени с предоставленным кодом для 'body'. – Dmitry

0

Спасибо за Жоао Palma комментариев:

.screen { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    -webkit-box-shadow: inset 0 0 10px #0d1f2b; 
    -moz-box-shadow: inset 0 0 10px #0d1f2b; 
    -o-box-shadow: inset 0 0 10px #0d1f2b; 
    box-shadow: inset 0 0 10px #0d1f2b; 
} 

    <div class="screen"></div> 

К сожалению, это не сработает IPAD, когда клавиатура видна :(Относительный вопрос: fixed position div freezes on page (iPad)

Смежные вопросы