Как раскрасить фон веб-сайта в два разных цвета?

ProgramBox

Как раскрасить фон веб-сайта в два разных цвета?

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#html #css #padding #background-color

#HTML #css #заполнение #background-color

Вопрос:

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

Мой вопрос таков: Как мне эмулировать этот фон разного цвета в HTML?

Я попытался по-другому раскрасить свои отступы с помощью HTML-тега в CSS (HTML

 { padding: 10%; background-color: #ebecef; }

) но мне не удалось полностью воплотить свою мечту. Я попытался создать divs (поскольку они являются «блочными тегами») и раскрасить их по-разному, но это не сработало.

Пример скриншота страницы

Высококонтрастный пример скриншота

Описание страницы с высокой контрастностью: Синий будет базовым цветом фона, оранжевый будет вставкой / наложением, а розовый будет навигационной панелью div, но он окрашен в тот же цвет, что и вставка / наложение, как показано на первом рисунке.

Чтобы попытаться прояснить: как бы это сделать: либо создать блоки другого цвета и преобразовать их в определенное положение, либо создать своего рода двухцветный эффект для цвета фона, который «вставляется» сам в себя или накладывается (в зависимости от того, что проще всего или работает), как показано на рисунке (серый — это базовый цвет, а белый — это дополнительный цвет, который был вставлен / наложен.)?

Я действительно надеюсь, что я объяснил это достаточно хорошо, если бы вы могли помочь, это было бы с благодарностью,

За исключением

Ответ №1:

Вы также можете использовать синтаксис линейного градиента, если хотите, чтобы два цвета смешивались, в зависимости от того, хотите ли вы провести жесткую или размытую границу между цветами. Узнайте больше об этом здесь:https://www.w3schools.com/css/css3_gradients.asp

пример синтаксиса ниже:

#grad { background-color: linear-gradient(-90deg, red, yellow); }

Ответ №2:

Особенно учитывая адаптивный дизайн, я бы сделал это с помощью сетки. Вам просто нужно 3 поля, и вы можете настроить заголовок так, чтобы он совпадал со смещением, или исправить отступы. Просто убедитесь, что вы установили z-индекс так, чтобы он отображался спереди.

 body {
  background-color: lightgrey;
  display: grid;
  grid-template-columns: 30px 40% auto 30px;
  grid-template-rows: 48px auto;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-size: 16px;
}

#title {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: transparent;
  text-align: center;
  padding-top: 38px;
  z-index: 1;
  font-size: 20px;
}

#menu {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: orange;
  text-align: center;
  padding-top: 16px;
}

#content {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: -1;
  background-color: yellow;
  min-height: 100vh;
  padding: 10px 10px 10px 10px;
}

 <body>
  <div id="title">Title</div>
  <div id="menu">Menu Link</div>
  <div id="content">
    <p>Random text content...</p>
  </div>
</body>

Ответ №3:

На самом базовом уровне вы можете добиться этого с помощью вложенных разделов, задав ширину и высоту в сочетании с position свойством css и top , left свойствами css. Как показано ниже:

     <div style="width: 100vw;height: 100vh;background-color: blue;position: relative;">
      <div style="height: inherit; width: inherit;">
        <div style="width: 100%; height: 80px;margin-right: 20%">
          <div style="width: 340px; height: 80px; background-color: green; float: right;margin-right: 10%">
        </div>
      </div>
      <div style="width: 80%;height: 80%;background-color: yellow;margin: auto auto;">
        <h1 style="position: absolute; top: 40px;left:120px">Lorem Ipsum</h1>
      </div>
    </div>

Песочница:
https://codesandbox.io/s/optimistic-voice-zgt9k?file=/index.html:0-830

Однако это решение не является адаптивным и является очень простым; в качестве альтернативы вы могли бы использовать CSS Grid или Flexbox для получения макета, который вы ищете на прикрепленных изображениях.

CSS Flexbox:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

CSS сетка:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

1. трудно следовать этой логике -> вызывает много головной боли, с которой нужно смириться. Кроме того, это приведет к появлению вредных привычек, а редактирование стиля в дальнейшем будет намного сложнее, чем необходимо. Окончательно согласовать решение Grid или Flexbox.

2. Согласен, вышесказанное предназначено для указания того, как достичь того, о чем спрашивают; я не предоставил решение для копирования и вставки с целью применения некоторой мысли к вопросу. Grid или Flexbox обеспечат комплексное решение

Ответ №4:

Я пытался перерисовать вашу картинку. Это не одно и то же, но вы можете использовать мои стили для своей цели. Я использовал навигацию в качестве div , но в Интернете есть много примеров навигации получше, таких как Bootstrap NAV. Это не реагирует, тогда вам придется добавить @media css туда и, возможно, использовать панель навигации collapse.

 body{
  background-color: blue;
}
.Center80{
  margin: 0 auto;
  width: 80vw;
}
.Menu{
  height: 20px;
  width: 30vw;
  margin-right: 0;
  background-color: #a119aa;
}
.SecondColor{
  background-color: orange;
  min-height: 100vh;
}
.SecondColor h1 {
  transform: translate(0px,-13px);
  color: white;
  font-size: 25px;
}

 <html>
<body>
  <div class="Center80 Nav" align="right">
    <div class="Menu">
      Menu
    </div>
  </div>
  <div class="SecondColor Center80">
    <h1>LOREM IPSUM</h1>
  </div>
</body>

1. несмотря на то, что до желаемого результата еще очень далеко. Это также приведет его на ложный путь неправильными методами learnign. Я просто хочу упомянуть div. FirstColor, который является бесполезным полем. Было бы проще и намного эффективнее просто определить тело { background: blue; } . также здесь неэффективно используется VW. Намного проще просто задать отступы для основного текста, а затем использовать 100% ширину для всех родительских разделов и автоматическую ширину для дочерних разделов.

2. Спасибо за ваши предложения, да, FirstColor был бесполезным полем, я изменил свой ответ и вместо этого использую body bg-color. Но я думаю, что заполнение тела — не лучшее решение, ммм, может быть, это потому, что vw требует объявлять его в любом контейнере? поскольку, если это класс, это не сценарий, мы можем повторно использовать этот класс для всех контейнеров, которым требуется такая ширина. и, возможно, используя другую ширину на другой странице системы, если мы объявляем в теле, мы должны переопределить это, если нам нужно больше или меньше места.

3. особенность заполнения тела в том, что оно работает глобально для всего. Если вы хотите перезаписать отступы, вам просто нужно использовать поле с отрицательным значением. На самом деле это не требует больших усилий и проще в обращении. если он хочет настроить левое и правое заполнение / margin, ему нужно сделать это только с помощью body-padding вместо редактирования полей каждого дочернего элемента. Вы также должны подумать, что позже кто-то собирается отредактировать стиль, и если вы не сделаете это правильно, у вас получится беспорядок.

4. Ммм да, я предположил, что это для глобальных целей, я предпочитаю использовать class для этого, я действительно предпочитаю не использовать отрицательное значение margin-left, если я могу использовать для этого классы контейнеров, дело в том, что мне не нравится использовать css напрямую для элементов, потому что позже нам придется переопределять его для новых требований…. мы продолжим бороться за наши собственные методы, если вы заметили, ха-ха