Как разместить фиксированное фоновое изображение * всегда * внизу мобильных браузеров? (CSS) - PullRequest
Новая
       42

Как разместить фиксированное фоновое изображение * всегда * внизу мобильных браузеров? (CSS)

0 голосов
/ 27 марта 2020

Я использую фиксированное фоновое изображение, выровненное по низу. 

background: url(image.jpg) bottom center no-repeat fixed;

Теперь есть проблема с некоторыми мобильными браузерами, например Opera, Edge Chromium и Safari. В верхней или нижней части приложений находятся панели браузера, которые скрывались при прокрутке страницы. Вы следуете?

Когда эта полоса исчезает, фоновое изображение остается на месте и не сдвигается к новому полю экрана.

Как вы можете исправить это поведение? Спасибо!

1 Ответ

0 голосов
/ 30 марта 2020

Пожалуйста, проверьте стиль нижнего колонтитула CSS, убедитесь, что свойство bottom установлено на "0".

Следующий пример хорошо работает на моей стороне (Edge Chromium на IOS), пожалуйста, обратитесь к ит. 

<head>
    <style>
        body{
            height: 1200px;
        }
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: red;
            color: white;
            text-align: center;
            height:50px;
            background: url("images/photographer.jpg") bottom center no-repeat fixed;
      }
</style>
</head>
<body>

<h1>The background-image Property</h1>

<p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br>
<p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br>\
<p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br>
   <p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br>
   <p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br>
   <p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br>
   <p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br>
   <p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br>
   <p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br><p>Hello World!</p><br>
<div class="footer">
  <p>Footer</p>
</div>
</body>
...