(HTML / CSS) Отзывчивый фоновый фрейм, вертикально соответствующий заголовку изображения? - PullRequest
Новая
       19

(HTML / CSS) Отзывчивый фоновый фрейм, вертикально соответствующий заголовку изображения?

0 голосов
/ 28 октября 2018

На Dribbble я нашел несколько классных изображений портфолио от сайта Outcrowd (пример ссылки, пример 2 ).

Основная идея состоит в том, чтобы на целевой странице было базовое (изогнутое или фигурное) фоновое изображение, которое также отображается в контейнере в качестве верхнего заголовка для основного содержимого. Проблема этой конструкции - ответственность . Я пытался придумать некоторые идеи, чтобы решить эту проблему, но они не сработали.

Идея 1: слои изображения 

body {
	margin: 0;
	background-color: #e7e6ed;
}

#bg {
	background-image: url("https://i.imgur.com/lUphGJh.png");
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding-bottom: 50%;
	background-position: bottom;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

#page {
    margin-top: 50px;
	position: relative;
	z-index: 10;
	padding: 0;
	box-shadow: 0 0 20px black;
}

header {
	background-image: url("https://i.imgur.com/NTwuZ1x.png");
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;	
	background-position: bottom;
	min-height: 300px;
}

.white {
	background-color: white;
}


/* The width of this would be different by viewports */
.container {
  margin: 0 auto;
  width: 80%;
}
<body>
  <div id="bg"></div>
    <div id="page" class="container">
	 <header>
      <!-- Some content here -->
      Title
      </header>
      <section class="white">
        <!-- Main content here -->
        <br><br>Lorem ipsum<br><br>dolor sit amet.<br><br>Lorem ipsum<br>
<br>Lorem ipsum<br><br>Lorem ipsum<br><br>Lorem ipsum <br><br>
Lorem ipsum<br><br>Lorem ipsum<br><br>Lorem ipsum
    </section>
  </div>
</body>

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

Идея 2: SVG или HTML5 canvas Я также попытался придумать некоторые геометрические вычисления, которые могли бы работать, но только с использованием JavaScript. (ИЛИ отзывчивый SVG?) Код выше будет выглядеть так: 

<div id="bg"><svg><!-- Paths and calculations --></svg></div>

Идея 3: Просто невозможно

Вероятно, есть причина, по которой никто этого не делает ...

Обратите внимание: на реально работающих веб-сайтах, создаваемых Outcrowd, рамки отсутствуют, как показано на изображениях портфолио.

Если у вас есть идеи о том, как это можно сделать, пожалуйста, ответьте на все, что может помочь :) Спасибо!

1 Ответ

0 голосов
/ 28 октября 2018

Это возможно, хотя и немного хлопотно:)

Во-первых, вам нужна общая точка отсчета (точка поворота), где должны быть привязаны оба перекошенных изображения / области.Поскольку ширина является переменной (отзывчивость и, возможно, берут на себя «ответственность» за всех пользователей;)), точка должна быть в середине страницы в определенной позиции y (я выбрал 300px).

Тогда нам нужен внешний контейнер, который будет использоваться как своего рода обтравочная маска (с использованием overflow:hidden) и который будет немного повернут.Внутренний контейнер вращается вокруг той же точки, что и внешний (в точке x: 50%, y: 100% от себя), но затем в противоположном направлении, чтобы показать содержимое прямо.Содержимое внутреннего контейнера теперь будет отрезано перекошенным способом.Поскольку повернутый блок оставляет «дыры» в углах, мы должны увеличить внешний, чтобы быть безопасным (width:200% страницы), и внутренний 50% этого (поскольку он будет охватывать точную ширину страницы).

enter image description here enter image description here

Теперь нам нужно увеличить внутренний контейнер, чтобы закрыть пустое пространство слева в левом нижнем углу.Таким образом, мы корректируем height и соответственно меняем верхнюю координату transform-origin, чтобы сохранить эту точку в центре.

enter image description here enter image description here

Итак, теперь у нас есть фон страницы.Для содержимого мы создадим вторую комбинацию контейнеров внутри .contents div, но скорректируем верхнее положение, чтобы учесть верхнее поле / отступ блока .contents.И, наконец, мы устанавливаем overflow:hidden и position:relative для .contents, чтобы отключить переполнение содержимого второй комбинации контейнера.

enter image description here enter image description here

Итак, поехали!Внутренние контейнеры теперь могут быть заполнены необходимыми изображениями или любым другим фоном.Для правильного позиционирования я использую некоторые transform s и position:fixed / position:absolute в сочетании с left / top / bottom, исправляя фоновый фон и позволяя фону содержимого прокручиваться вдольс остальной частью страницы.

Посмотрите на рабочий пример, который я сделал на jsFiddle

Бонус

ЕслиВы хотите другую форму или просто изображение с формой и прозрачным фоном, вращение и увеличение не нужны.Вы просто делаете так, чтобы оба фоновых контейнера имели одинаковую привязку / опору (при x = 50% и y = независимо от того, что вы выбрали в качестве нижней части изображения bg) и одинакового размера.Это делается путем масштабирования .contents относительно ширины страницы, чтобы вы могли масштабировать фоновое изображение содержимого в соответствии с шириной страницы.

Вы уже догадались!Вот рабочий пример этого здесь

...