Диагональный фон в CSS (Адаптивный) - PullRequest
Новая
       42

Диагональный фон в CSS (Адаптивный)

0 голосов
/ 06 августа 2020

Вот изображение того, что я пытаюсь достичь в первую очередь: https://i.imgur.com/bTsL2wS.png

Обратите внимание, что это должен быть только один раздел полного страница. Фон не должен охватывать весь сайт. Однако каждый раздел имеет полноэкранные размеры.

У меня было две идеи относительно этого:

  • Создайте объект-контейнер с размерами области просмотра и добавьте изображение, расположенное relative с z-index: -1 и внутри него absolute -позиционированный img с right: 0 и шириной ~ 60%, затем поверните его.
  • То же, что и выше, но поместите img внутри 60% ширины выровняйте субконтейнер по правому краю и наклоните контейнер.

Оба подхода работают на экране рабочего стола, но это происходит при слишком большом уменьшении размера окна. В основном мне нужно, чтобы он работал, пока область просмотра не достигнет размера планшета / мобильного телефона.

Ответы [ 2 ]

0 голосов
/ 06 августа 2020 
*{ box-sizing: border-box}
#blue{ background: #269;}
#red{ background: #a22;}
#green{ background: #6a6; }
section{ display: block; height: 100vh; margin: 2% auto; color: #fff; font: normal 16px verdana, sans-serif; text-align: center; }
div{ height: 100%; width: 70%; overflow: hidden; float: right;}
img{ transform: rotate(70deg); height: 920px;  margin: -120px 0 auto; }
h1, p{ margin: 5% auto 0 0; width: 40%;}
@media only screen and (min-height: 500px){ h1, p{ margin: 30% auto 0 0 }}
span{ position: absolute; left: 2%; z-index: 2; background: rgba(0,0,0,0); height: 100vh; width: 96%; padding: 20px }

css только для тестов 

span::before{ content: 'this is span'}
p::after{ content: 'this is pafagraph'; display: block; padding: 20px 0 0}
h1::after{ content: 'this is h1'}
section:hover h1, section:hover p{ background: grey}
span:hover{ background: rgba(0,0,0,0.5); } 

<section id="blue"><div><img src="img.jpg" alt="blue"></div><span><h1></h1><p></p></span></section>
<section id="red"><div><img src="red.jpg" alt="red"></div><span><p></p></span></section>
<section id="green"><div><img src="green.jpg" alt="green"></div></section>

Отзывчивость - давняя история, мобильная версия актуальна. Конечно, с отзывчивыми решениями, но @media только для больших устройств. Лучше не использовать flex, он плохо протекает.

0 голосов
/ 06 августа 2020

Оберните часть, которую вы хотите, с этим фоном в div, затем добавьте свойство background-image в div.

...