Блог

Главная - Вопросы по программированию - Фоновое изображение на мобильных устройствах не реагирует

Фоновое изображение на мобильных устройствах не реагирует

#html #css

#HTML #css

Вопрос:

Я работаю над веб-сайтом (пожалуйста, не судите об этом). Так как это проект, который я должен представить, они откроют мой веб-сайт как на мобильных устройствах, так и на ПК.

Я использовал Bootstrap CSS и реализовал некоторый CSS для своего фонового изображения, но дело в том, что оно выглядит эпично на ПК, но очень ужасно, когда я открываю его на своем мобильном телефоне.

Вот несколько фотографий, когда я открываю его на ПК

Изображение на ПК-1

Изображение на ПК-2

И вот те же фотографии моего веб-сайта, когда я открываю его на своем мобильном телефоне (без режима рабочего стола)

Изображение на мобильном устройстве-1

Когда я открываю его с помощью DesktopMode на мобильном устройстве, оно выглядит хорошо, но фоновое изображение просто недостаточно отзывчиво

Изображение на мобильном устройстве с режимом рабочего стола

Ниже приведен код стиля CSS, который я использовал:

 <div
  class="
    position-relative
    overflow-hidden
    p-3 p-md-5
    m-md-3
    text-center
    bg-dark
  "
  style="
    color: white;
    background-image: url('https://images.unsplash.com/photo-1611716524065-622312678d68?crop=entropyamp;cs=tinysrgbamp;fit=cropamp;fm=jpgamp;h=1080amp;ixid=MnwxfDB8MXxyYW5kb218MHx8c3BhY2V8fHx8fHwxNjM5MDYyNzc3amp;ixlib=rb-1.2.1amp;q=80amp;utm_campaign=api-creditamp;utm_medium=referralamp;utm_source=unsplash_sourceamp;w=2048');
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    border-radius: 30%;
  "
></div>

Пожалуйста, предложите мне несколько способов исправить этот ужасный вид при открытии веб-сайта на мобильных устройствах, потому что у меня недостаточно навыков CSS для этого. Если я допустил какую-либо ошибку, пожалуйста, скажите мне, чтобы я ее исправил. Спасибо

Комментарии:

1. Этот вопрос либо слишком широк, основан на мнениях, либо требует обсуждения и поэтому не относится к теме переполнения стека. Если у вас есть конкретная, ответственная проблема с программированием, пожалуйста, предоставьте полную информацию.

2. да, вы правы, но я просто должен попросить решения в соответствии с моей проблемой, которая заключается в том, что веб-сайт выглядит ужасно, когда я тестирую его на своем телефоне из-за какого-то css, есть много подобных вопросов, но вы правы, это потребует обсуждения и так далее..

3. Эта библиотека может помочь: jquery-backstretch.com

4. Пожалуйста, предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.

Ответ №1:

Привет, товарищ разработчик,

Есть много способов улучшить дизайн и в конечном итоге получить удовлетворительный результат, которого вы хотите достичь. Я думаю, вам следует заметить и изменить несколько вещей :

  1. На этом изображении https://i.stack.imgur.com/Q3cJYm.jpg , Вы можете видеть, как фон первого div сталкивается со вторым разделением. Если вы можете попробовать назначить первому div и второму div их собственный background-img. Я могу предположить, что вы применяете фоновое изображение к основному / родительскому div, а внутри этого div у вас есть другой div со своим собственным фоном.
  2. Обработка фона при просмотре с мобильных устройств: часто фоновые изображения хорошо смотрятся на рабочем столе и выглядят искаженными на мобильных устройствах, например, в случае с вами. В таком случае вам придется обрабатывать растягивание, масштабирование и содержимое. Вы можете найти лучшие знания во многих блогах

Но в вашем случае, я думаю, вам следует сделать что-то вроде следующего

 .back1{
background-image: url('https://images.unsplash.com/photo-1611716524065-622312678d68?crop=entropyamp;cs=tinysrgbamp;fit=cropamp;fm=jpgamp;h=1080amp;ixid=MnwxfDB8MXxyYW5kb218MHx8c3BhY2V8fHx8fHwxNjM5MDYyNzc3amp;ixlib=rb-1.2.1amp;q=80amp;utm_campaign=api-creditamp;utm_medium=referralamp;utm_source=unsplash_sourceamp;w=2048');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
height: 70px;;
color : white;
}

.back2{
background-image: url('https://image.freepik.com/free-vector/gradient-colored-background-with-geometrical-shapes_23-2149112683.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
height: 70px;;
color : white;
} 
 <!doctype html>
<html>
<body>
<div class="back1"> YOUR CONTENT HERE - DIV 1 </div>
<div class="back2"> YOUR CONTENT HERE - DIV 2</div>
</body>
</html>

Метки: