2 фона в градиенте

@linux_noob · Регистрация: 20.10.2013

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

Всем привет.

У меня возникла проблема.
Нужно сделать 2 фона градиента по пол страници каждый.
В принципе получилось вот:

PHP/HTML
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
 <html>
 <head>
  <meta charset="utf-8">
  <title>Два фоновых изображения</title>
  <style>
   html {
    background: linear-gradient(to top, #444444, #222222);
    
    height: 100%; width: 50%; 
   }
   body {
    background: linear-gradient(to top, #dddddd, #ffffff); 
    margin: 0; 
    height: 100%; 
   }
   p {
    margin: 0;
    padding: 5px 0 0 20px; 
   }
  </style>
 </head>
 <body>
  <p>Содержимое веб-страницы</p>
 </body>
</html>

Но вот надпись Содержимое веб-страницы должно находиться ровно в центре. помогите!

@Nikita2014 · 02.02.2014, 19:17

Попробуйте следующий код:

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
<html>
<head>
<meta charset="utf-8">
<title>Два фоновых изображения</title>
<style>
html {
background: linear-gradient(to top, #444444, #222222);
 
height: 100%; width: 50%; 
}
body {
background: linear-gradient(to top, #dddddd, #ffffff); 
margin: 0; 
height: 100%; 
}
p {
margin: 0;
padding: 50% 50%; 
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<p>Содержимое веб-страницы</p>
</body>
</html>

@linux_noob · 02.02.2014, 19:23 **[ТС]**

Всё также текст на белом градиенте, он должен быть на переходе цветов

@Nikita2014 · 02.02.2014, 19:23

Выше приведённый код немного не правильный, советую использовать нижеприведённый код:

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
<html>
<head>
<meta charset="utf-8">
<title>Два фоновых изображения</title>
<style>
html {
background: linear-gradient(to top, #444444, #222222);
 
height: 100%; width: 50%; 
}
body {
background: linear-gradient(to top, #dddddd, #ffffff); 
margin: 0; 
height: 100%; 
}
#mn {
margin: 0;
padding: 0;
position: relative;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id="mn">
    <p>Содержимое веб-страницы</p>
</div>
</body>
</html>

@linux_noob · 02.02.2014, 19:48 **[ТС]**

Текст бегает при изменении размеров окна. заменил на это

CSS
1
2
3
4
5
6
#mn {
margin: -100;
padding: 0;
position: absolute;
left: 50%;
top: 50%;

Стало нормально. Спасибо)))

@Taatshi · 03.02.2014, 22:08

linux_noob, не стоит урезать html или body на полстраницы. Это неграмотно.

HTML5
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
36
37
<html>
 <head>
  <meta charset="utf-8">
  <title>Два фоновых изображения</title>
  <style>
   html, body {
   margin: 0;
   padding: 0;
   }
    body   {
    background: linear-gradient(to top, #444444, #222222);    
    height: 100%; width: 100%; 
   }
   #left {
    background: linear-gradient(to top, #dddddd, #ffffff); 
    margin: 0; 
    height: 100%; 
    width: 50%;
    position:absolute;
   }
   #content {
   position:relative;
   margin: 0 auto;
   }
   #content p {
    text-align: center;
   }
  </style>
 </head>
 <body>
 <div id="left"> 
 </div>
 <div id="content">
  <p>Содержимое веб-страницы</p>
 </div>
 </body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@linux_noob 0 / 0 / 0 Регистрация: 20.10.2013 Сообщений: 23
	02.02.2014, 19:23 [ТС]
	Всё также текст на белом градиенте, он должен быть на переходе цветов 0