Часть страницы одним фоном, другая другим, не равномерно. Есть контейнер для содержимого

@SilverWolf · Регистрация: 04.06.2015

Студворк — интернет-сервис помощи студентам

Привет всем!
Вопрос из разряда, как сделать.
Итак, условие:
Есть блок назовем его First, он имеет в себе блок Container (width: 980px; padding: 0 10px). В контейнере, где-то у дочерних элементов есть 2 nav (менюшки), по данным менюшкам, блок First делиться на левая часть и правая. Примерное деление, ~60% левая часть, ~40% правая.
Теперь самое интересное!
First имеет в себе картинку, она растянута по всему экрану, на всю высоту и ширину.
Эта картинка должна быть закрашена(с альфа каналом - rgba) в 2 цвета, без разницы каких. Как это сделать?

Проблема в том, Container = 980px, я его делю на 60% и 40%. Container кстати по середине.
Теперь если я попробую для применить :before и :after, по данным значением, то они не совпадают с теми что внутри Container.
У кого-нибудь есть идеи? Бьюсь над этим 3-и сутки...

@Kornerupin · 24.07.2018, 22:38

А можно фотку этого места в макете? Дизайнер ведь это как-то нарисовал.

@SilverWolf · 24.07.2018, 22:38 **[ТС]**

Если кто не понял, то просто сделайте блок по центру экрана, в него 2 блока которые его делят в процентном соотношении (только не 50%-50%), по этому соотношению разделите фоновую картинку на 2 визуальных эффекта, пусть левая в желтоватый цвет, а правая в серый. И чтобы страничка была адаптивна.

Вот картиночка для примера.

@Kornerupin · 24.07.2018, 23:55

SilverWolf, я так понимаю, что ширина пунктов заранее неизвестна, да ещё и может меняться. Что ж, ты можешь сделать невероятно извращенскую штуку:

1. Создаёшь svg(или png) картинку с жёлтым полупрозрачным фоном.

2. Тот пункт меню, который должен быть разделителем, делаешь position:relative и добавляешь ему псевдоэлемент, высотой с родительский элемент (чтобы он не перекрывал что не надо, можешь с z-index'ом поиграть)

CSS
1
2
3
4
5
6
7
8
li.separator::before {
    content: "";
    position: absolute;
    top: -20px; // Это чтобы и над менюшкой фон закрасить.
    background: url("ссылка/на/фон");
    width: 2000px; // Это чтобы прям точно до конца правой стороны экрана дошёл
    height: 600px; // Тут указываешь высоту блока. В крайнем случае и высоту и ширину можешь JS'ом менять.
}

Ну и чтобы за пределы основного контейнера ничего не лезло, задай ему overflow:hidden;

Добавлено через 3 минуты
P.S. ~~Если~~ Когда тебя прийдут бить за такой код, вали всё на дизайнера ))

Добавлено через 1 минуту
P.P.S. К слову, больше всего геморроя у тебя будет не с фоном, а с надписью. Как её делать я без понятия, может позже и придумаю.

Добавлено через 53 минуты
====================================

Так, всё, я всё понял =)

1. Создаём контейнер для меню, такой ширины, чтобы не было отступов по бокам. Растягиваем его на всё доступную высоту.

2. Создаём ДВА меню - то, что жёлтое и то, что чёрное. Т.к. контейнер по размеру равен сумме ширин двух меню, они выглядят единым целым. ul у меню также растягиваем на 100% высоты.

3. Для правого ul'a делаем жёлтый фон. Если на больших экранах планируются отступы по бокам, вместо фона для ul'a делаем фон для псевдоэлемента, по вышеописанному принципу.

4. Чтобы сделать надпись, создаём ДВЕ надписи с идентичным текстом. Они с помощью абсолютного позиционирования фиксируются в одной точке.

5. Первую надпись прикрепляем к общему для обоих меню контейнеру и делаем чёрной. Левый контейнер с меню должен встать поверх неё, тогда она вылезет из-под левого контейнера, когда он закончится, и станет видна только та часть, которая будет за пределами левого меню, т.е. та, которая и нужна.

6. Вторую надпись прикрепляем к левому контейнеру и делаем жёлтой. Т.к. верхний левый угол правого контейнера совпадает с общим контейнером, надписи наложатся одна поверх другой. Чёрная надпись должна быть под жёлтой. Левому контейнеру задаём overflow: hidden;, чтобы жёлтый текст обрезался.

7. Смотрим, чтобы всё работало как надо, при необходимости добавляем z-index, чтобы элементы правильно друг друга перекрывали.

8. Профит.

@AlexZaw · 25.07.2018, 00:07

Kornerupin, Зачем такие сложности?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="out">
  <div class="left"></div>
  <div class="right">
    <div class="menu">
      <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li> 
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
      </ul>
    </div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
*{
  margin: 0;
}
.out{
  height: 100vh;
  background:url(http://placekitten.com/g/1000) no-repeat;
  position: relative;
}
.left{
  position: absolute;
  left: 0;
  background: rgba(0,0,0,.5);
  height: 100%;
  width: 60%;
}
.right{
  position: absolute;
  right: 0;
  background: rgba(255,255,0,.5);
  height: 100%;
  width: 40%;
}
ul{
  padding: 0;
}
li{
  display: inline-block;
  list-style: none;
}
.menu{
  display: inline-block;
  margin-top: 50px;
  transform: translateX(-50%);
  background: linear-gradient(to right,#ff0 50%, #000 50%);
  }

JavaScript
1
2
3
4
var li = document.querySelectorAll('.menu li')
for(var i = li.length-1; i >= li.length/2; i--){
  li[i].style.color='#ff0';
}

@Kornerupin · 25.07.2018, 00:14

AlexZaw, JS - читерство )

Добавлено через 2 минуты
Эээээм.... а что Вы делаете этим JS'ом? Там фишка в том, чтобы перекрасить надпись "THIS IS TEST", причём частично, а не элементы меню - элементы перекрашиваются вообще как нечего делать

CSS
1
2
3
li:nth-child(n + 5) {
   color: red;
}

Добавлено через 2 минуты
А с надписью "THIS IS TEST" проблема в том, что линия перекрашивания с жёлтой на чёрную должна пройти чётко по границе жёлтой области (которая справа). Она может пройти между буквами, а может и по букве. Так что тут даже JS не поможет.

Теоретически, можно попытаться сделать это SVG + JS, конкретно помучавшись, но это не точно.

@AlexZaw · 25.07.2018, 00:16

Kornerupin, js-ом перекрашивал пункты меню, чтобы при изменении количества не переписывать код.

Надпись делается элементарно - делаем цвет надписи желтый, нужное слово оборачиваем в span и делаем его черным.
Надпись размещаем абсолютно относительно любого из блоков.
Ну и подгоняем таким образом чтобы линия раздела цветов не проходила по букве, ибо адекватного метода для такого в css (да и в остальном) нету

@Kornerupin · 25.07.2018, 00:21

AlexZaw, так тут в том-то и фишка, что текст должен перекраситься не побуквенно - жёлтое поле справа может "перерезать" букву, и половина её (или какая-то часть) должна будет остаться жёлтой, а вторая половина - стать чёрной. Это с помощью простого CSS не решается.

Добавлено через 1 минуту
Тут в том и проблема, что заранее неизвестна не ширина левого меню, ни ширина правого, точно также как неизвестен текст, который должен будет перекрашиваться.

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

@AlexZaw · 25.07.2018, 00:22

Kornerupin, может она ее перерезать или нет - будет зависить от нас

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

Сообщение от Kornerupin

то с помощью простого CSS не решается.

Да это вообще адекватно никак не решается, все только через костыли и извращения

@Kornerupin · 25.07.2018, 00:24

AlexZaw, а у меня всё перекрасится как надо =))) Потому что у меня изначально две надписи разных цветов, просто чёрная лежит под жёлтой. Как только левая часть закончится, жёлтая надпись обрежется и покажется чёрная. А так как они пиксель в пиксель совмещены, без разницы, когда это будет - буква станет чёрной как только закончится левая часть.

К сожалению, от нас не будет ничего зависеть, если заказчик в админке поменяет эту надпись. Да и <span> сам не проставится =(((

@AlexZaw · 25.07.2018, 00:33

Не по теме:

Сообщение от Kornerupin

если заказчик в админке поменяет эту надпись

Осталось только объяснить заказчику что надпись нужно будет менять в двух местах :)
Да, можно ее дублировать с помощью того же js
Идеального варианта не существует :( Да и не будете же вы спорить что ваш вариант это все-равно костыли :)
Кстати, по хорошему, меню надо тоже дублировать, т.к. если будет нечетное количество пунктов, то граница опять же будет проходить посередине слова.

@Kornerupin · 25.07.2018, 01:09

AlexZaw, да, я сразу сказал, что такая жуть будет работать только с костылями =)) Но будет, сейчас допилю и залью =)

Добавлено через 35 минут
https://codepen.io/kornerupin/pen/ajwNWo

Ву-ху!

@SilverWolf · 25.07.2018, 01:17 **[ТС]**

Ребят! ПРИЧЕМ ТУТ НАДПИСЬ?!?!??! Я все реализовал, кроме конченного фона. Вопрос только по фону! JS юзать для верстки плохо - мне голову оторвут. И насчет меню, зачем его делать 1???!? 2 nav я ведь написал. И где вы контейнер сделали?! Кроме фона все отлично работает!

@Kornerupin · 25.07.2018, 01:19

SilverWolf, эх, а у меня такая классная демка вышла =)))

По поводу фона написал выше, как сделать, ну и в демке можешь глянуть.

@SilverWolf · 25.07.2018, 01:20 **[ТС]**

И смысл в том, что 2 эффекта, 2 закрашивание картинки! НЕ ОДНО! Просто альфа канал разный и цвет серый и желтый в примере. А так картинка ярка.
P.S. Если весь фон всунуть в серый с альфа каналом, а на левую(или правую) часть кинуть только желтый, получается тускло желтый, даже если выкрутить альфа канал на максималку.

@Kornerupin · 25.07.2018, 01:22

SilverWolf, ну так а в чём проблема-то? Для левого сделай то же самое, что для правого, только цвет другой поставь

@SilverWolf · 25.07.2018, 01:26 **[ТС]**

А в вашем варианте контейнера нету, а он обязательное условие, по середине 980px + 10 оступы

Добавлено через 2 минуты
И Вариант типо выставим: width: 2000px; НЕ КАТИТ. У меня моник 4к например. И выставлять четкое значение px в данном случае костыль и мне по шее. Даже если вкинуть туда 9999px, все равно косяк и руководитель до *матное слово*.

@Kornerupin · 25.07.2018, 01:34

SilverWolf, ты просил решение, я сделал решение. Здесь не может быть "хорошего" решения без костылей или JS, т.к. макет такой.

Как вариант, можешь поставить не 2000px, а 100vw, тогда любой монитор никуда не денется, и выглядит не так палевно.

Добавлено через 3 минуты
По поводу контейнера - то же самое, нужен контейнер - добавь контейнер. Я же пример сделал, а не окончательную реализацию.

@AlexZaw · 25.07.2018, 11:13

т.е. вот такой вариант не подходит?

HTML5
1
2
3
4
<div class="out">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*{
  margin: 0;
}
.out{
  height: 100vh;
  background:url(http://placekitten.com/g/1000) no-repeat;
  position: relative;
}
.left{
  position: absolute;
  left: 0;
  background: rgba(0,0,0,.5);
  height: 100%;
  width: 60%;
}
.right{
  position: absolute;
  right: 0;
  background: rgba(255,255,0,.5);
  height: 100%;
  width: 40%;
}

Сообщение от Kornerupin

Ву-ху!

Я ж говорил где-нибудь косяк вылезет. Нельзя скопировать заголовок

@Kornerupin · 25.07.2018, 14:27

AlexZaw, там не должно быть фиксированной ширины, поэтому не подходит.

Можно =))) Просто проведи дальше и нажми ctrl+c, спокойно копируется. Там часть не видна, а скопировать её можно.

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@SilverWolf 3 / 3 / 0 Регистрация: 04.06.2015 Сообщений: 56

	Часть страницы одним фоном, другая другим, не равномерно. Есть контейнер для содержимого 24.07.2018, 22:31. Показов 3135. Ответов 26 Метки :after, :before, background-color, background-image, position absolute (Все метки) Привет всем! Вопрос из разряда, как сделать. Итак, условие: Есть блок назовем его First, он имеет в себе блок Container (width: 980px; padding: 0 10px). В контейнере, где-то у дочерних элементов есть 2 nav (менюшки), по данным менюшкам, блок First делиться на левая часть и правая. Примерное деление, ~60% левая часть, ~40% правая. Теперь самое интересное! First имеет в себе картинку, она растянута по всему экрану, на всю высоту и ширину. Эта картинка должна быть закрашена(с альфа каналом - rgba) в 2 цвета, без разницы каких. Как это сделать? Проблема в том, Container = 980px, я его делю на 60% и 40%. Container кстати по середине. Теперь если я попробую для применить :before и :after, по данным значением, то они не совпадают с теми что внутри Container. У кого-нибудь есть идеи? Бьюсь над этим 3-и сутки... 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	24.07.2018, 22:38
	А можно фотку этого места в макете? Дизайнер ведь это как-то нарисовал. 0

@SilverWolf 3 / 3 / 0 Регистрация: 04.06.2015 Сообщений: 56
	24.07.2018, 22:38 [ТС]
	Если кто не понял, то просто сделайте блок по центру экрана, в него 2 блока которые его делят в процентном соотношении (только не 50%-50%), по этому соотношению разделите фоновую картинку на 2 визуальных эффекта, пусть левая в желтоватый цвет, а правая в серый. И чтобы страничка была адаптивна. Вот картиночка для примера. Миниатюры 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	25.07.2018, 00:16
	Kornerupin, js-ом перекрашивал пункты меню, чтобы при изменении количества не переписывать код. Надпись делается элементарно - делаем цвет надписи желтый, нужное слово оборачиваем в span и делаем его черным. Надпись размещаем абсолютно относительно любого из блоков. Ну и подгоняем таким образом чтобы линия раздела цветов не проходила по букве, ибо адекватного метода для такого в css (да и в остальном) нету 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	25.07.2018, 00:21
	AlexZaw, так тут в том-то и фишка, что текст должен перекраситься не побуквенно - жёлтое поле справа может "перерезать" букву, и половина её (или какая-то часть) должна будет остаться жёлтой, а вторая половина - стать чёрной. Это с помощью простого CSS не решается. Добавлено через 1 минуту Тут в том и проблема, что заранее неизвестна не ширина левого меню, ни ширина правого, точно также как неизвестен текст, который должен будет перекрашиваться. И при всём при этом когда надпись переходит на жёлтую область, она сразу же должна перекраситься в чёрный, даже если получится разноцветная буква. 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	25.07.2018, 00:24
	AlexZaw, а у меня всё перекрасится как надо =))) Потому что у меня изначально две надписи разных цветов, просто чёрная лежит под жёлтой. Как только левая часть закончится, жёлтая надпись обрежется и покажется чёрная. А так как они пиксель в пиксель совмещены, без разницы, когда это будет - буква станет чёрной как только закончится левая часть. К сожалению, от нас не будет ничего зависеть, если заказчик в админке поменяет эту надпись. Да и <span> сам не проставится =((( 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	25.07.2018, 01:09
	AlexZaw, да, я сразу сказал, что такая жуть будет работать только с костылями =)) Но будет, сейчас допилю и залью =) Добавлено через 35 минут https://codepen.io/kornerupin/pen/ajwNWo Ву-ху! 0

@SilverWolf 3 / 3 / 0 Регистрация: 04.06.2015 Сообщений: 56
	25.07.2018, 01:17 [ТС]
	Ребят! ПРИЧЕМ ТУТ НАДПИСЬ?!?!??! Я все реализовал, кроме конченного фона. Вопрос только по фону! JS юзать для верстки плохо - мне голову оторвут. И насчет меню, зачем его делать 1???!? 2 nav я ведь написал. И где вы контейнер сделали?! Кроме фона все отлично работает! 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	25.07.2018, 01:19
	SilverWolf, эх, а у меня такая классная демка вышла =))) По поводу фона написал выше, как сделать, ну и в демке можешь глянуть. 0

@SilverWolf 3 / 3 / 0 Регистрация: 04.06.2015 Сообщений: 56
	25.07.2018, 01:20 [ТС]
	И смысл в том, что 2 эффекта, 2 закрашивание картинки! НЕ ОДНО! Просто альфа канал разный и цвет серый и желтый в примере. А так картинка ярка. P.S. Если весь фон всунуть в серый с альфа каналом, а на левую(или правую) часть кинуть только желтый, получается тускло желтый, даже если выкрутить альфа канал на максималку. 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	25.07.2018, 01:22
	SilverWolf, ну так а в чём проблема-то? Для левого сделай то же самое, что для правого, только цвет другой поставь 0

@SilverWolf 3 / 3 / 0 Регистрация: 04.06.2015 Сообщений: 56
	25.07.2018, 01:26 [ТС]
	А в вашем варианте контейнера нету, а он обязательное условие, по середине 980px + 10 оступы Добавлено через 2 минуты И Вариант типо выставим: width: 2000px; НЕ КАТИТ. У меня моник 4к например. И выставлять четкое значение px в данном случае костыль и мне по шее. Даже если вкинуть туда 9999px, все равно косяк и руководитель до матное слово. 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	25.07.2018, 01:34
	SilverWolf, ты просил решение, я сделал решение. Здесь не может быть "хорошего" решения без костылей или JS, т.к. макет такой. Как вариант, можешь поставить не 2000px, а 100vw, тогда любой монитор никуда не денется, и выглядит не так палевно. Добавлено через 3 минуты По поводу контейнера - то же самое, нужен контейнер - добавь контейнер. Я же пример сделал, а не окончательную реализацию. 0

@Kornerupin 31 / 19 / 7 Регистрация: 08.05.2017 Сообщений: 115
	25.07.2018, 14:27
	AlexZaw, там не должно быть фиксированной ширины, поэтому не подходит. Можно =))) Просто проведи дальше и нажми ctrl+c, спокойно копируется. Там часть не видна, а скопировать её можно. К тому же на кой человеку понадобится это копировать? По-хорошему, надо вообще запретить выделение этого места, чтобы не портился внешний вид. 0