Как плавать и закреплять фоновые элементы в адаптивном и масштабируемом режиме? - PullRequest
Новая
       9

Как плавать и закреплять фоновые элементы в адаптивном и масштабируемом режиме?

0 голосов
/ 06 апреля 2020

Контекст

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

Это макет, который я хочу создать:

enter image description here

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

enter image description here

Проблема

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

Попытки решения

  1. Я попытался сделать фоновые элементы были элементами div, а затем я использовал свойство transform: rotate() translateX() translateY() для их перемещения. Это работает, но, конечно, это связано с указанным c размером экрана. После изменения размера экрана эти значения c translate не перемещаются, и, таким образом, элементы go исчезают с экрана. Медиа-запросы могут быть здесь полезны, но мне могут понадобиться многие из них.

  2. Я взял весь фон из своего программного обеспечения для проектирования и превратил его в один SVG. Затем я применил это в качестве фона со следующими свойствами: 

body {
    background-image: url('path/to/img.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    width: 100vw;
    height: 100vh;
}

Это также не работает, потому что кажется, что обрезать изображение при уменьшении размера экрана. Для экрана большого размера у вас есть:

enter image description here

А для экрана небольшого размера:

enter image description here

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

1 Ответ

1 голос
/ 06 апреля 2020

Сборка целиком с одним фоном: 

html {
  min-height:100%;
  background:
  /* left part*/                                                               /* position      / width height */
    linear-gradient(to bottom left,transparent 49.5%,rgba(255,255,255,0.2) 50%) left 0 top -80px / 80px 200px,
    linear-gradient(to top   left ,transparent 49.5%,rgba(255,255,255,0.2) 50%) left 0 top 120px / 80px 70px,
    /* right part*/
    linear-gradient(to bottom right,transparent 49.5%,rgba(0,0,0,0.5) 50%) right 0 top 20px / 80px 70px,
    linear-gradient(to top right   ,transparent 49.5%,rgba(0,0,0,0.5) 50%) right 0 top 90px / 80px 200px,
    /* bottom part*/
    linear-gradient(to bottom right,transparent 49.5%,rgba(255,255,255,0.5) 50%) bottom 0 left 20px / 200px 80px,
    linear-gradient(to bottom left ,transparent 49.5%,rgba(255,255,255,0.5) 50%) bottom 0 left 220px / 70px 80px,
    /* main background */
    linear-gradient(45deg,#5fd6df,#e23bf5);
   background-repeat:no-repeat;
}

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

...