странное поведение CSS, когда экран становится прокручиваемым - PullRequest
Новая
       10

странное поведение CSS, когда экран становится прокручиваемым

0 голосов
/ 13 июня 2018

Если здесь есть несколько хороших дизайнеров внешнего интерфейса, мне нужна помощь!На самом деле я работаю над проектом целевой страницы и пробую новые вещи, но на самом деле я сталкиваюсь с ситуацией:

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

Затем, если я уменьшу, мой цвет фона будет испорчен, то же самое для моего изображения: введите описание изображения здесь

Я использую код примера обложки Boostrap 4.Вот мой основной html приложения: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><%= @page_title %></title>
    <%= csrf_meta_tags %>
    <!--   <meta name="keywords" content= "<%= @seo_keywords %>"/> -->
    <meta name="keywords" content= "<%=@seo_keywords%>">
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  </head>
  <body>
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column background">
      <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <%= render 'shared/nav', location: 'top'%>
        <%= yield %>
        <%= render 'shared/application_footer' %>
        <%= source_helper("application") %>
      </div>
    </div>
  </body>
</html>

И мой CSS (соответствующая часть: 

body {
  background-image: linear-gradient(to bottom, rgba(0,101,168,0.6) 0%, rgba(0,36,61,0.6) 50%), url('profile-pictures/palmtree-cover.jpg');
  height:100vh;
  width:auto;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .2);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.cover-container {
  max-width: 90%;
}
/*
 * Header
 */
 .masthead {
  margin-bottom: 2rem;
}
.masthead-brand {
  margin-bottom: 0;
}
.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}
.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}
@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}
/*
 * Cover
 */
 .cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}
/*
 * Footer
 */
 .mastfoot {
  color: rgba(255, 255, 255, .5);
}
.inner {
  text-align: center
}
/*
*Custom styles
*/

Я не трогал классы начальной загрузки, возможно, я немного почистилно это все. Я не понимаю этого поведения, и я только хочу, чтобы фоновый цвет / изображение / градиент были такими же и полностью отзывчивыми. Также я уточняю, что при проверке я не вижу, за какой класс отвечаетэто!

1 Ответ

0 голосов
/ 13 июня 2018

Попробуйте использовать: background-size: cover; для разрешения с пробелом вокруг изображения.

...