Поддержка старых браузеров
Если необходима поддержка старых браузеров, поэтому вы не можете использовать несколько фонов или градиентов, вы, вероятно, захотите сделать что-то подобное на запасном div
элементе:
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Пример: http://jsfiddle.net/PLfLW/1704/
Решение использует дополнительный фиксированный div, который заполняет половину экрана. Так как это исправлено, оно останется на месте, даже когда ваши пользователи прокрутят. Возможно, вам придется поэкспериментировать с некоторыми z-индексами позже, чтобы убедиться, что другие ваши элементы находятся выше фонового div, но это не должно быть слишком сложным.
Если у вас есть проблемы, просто убедитесь, что остальная часть вашего контента имеет z-индекс выше, чем фоновый элемент, и вы должны быть готовы.
Современные браузеры
Если новые браузеры - ваша единственная забота, есть пара других методов, которые вы можете использовать:
Линейный градиент:
Это определенно самое простое решение. Вы можете использовать линейный градиент в свойстве background для тела для различных эффектов.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Это приводит к жесткому обрезанию на 50% для каждого цвета, поэтому не существует «градиента», как следует из названия. Попробуйте поэкспериментировать с частью стиля «50%», чтобы увидеть различные эффекты, которые вы можете достичь.
Пример: http://jsfiddle.net/v14m59pq/2/
Несколько фонов с размером фона:
Вы можете применить цвет фона к html
элементу, а затем применить фоновое изображение к body
элементу и использовать background-size
свойство, чтобы установить для него 50% ширины страницы. Это приводит к аналогичному эффекту, хотя на самом деле будет использоваться только с градиентами, если вы используете изображение или два.
html {
height: 100%;
background-color: cyan;
}
body {
height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;
}
Пример: http://jsfiddle.net/6vhshyxg/2/
EXTRA Примечание: Обратите внимание , что оба html
и body
элементы устанавливаются height: 100%
в последних примерах. Это сделано для того, чтобы убедиться, что даже если ваш контент меньше страницы, фон будет иметь высоту, равную высоте окна просмотра пользователя. Без явной высоты фоновый эффект будет уменьшаться только до содержания вашей страницы. Это также просто хорошая практика в целом.
linear-gradient
Жесткий отсечка также работает пикселей:background: linear-gradient(90deg, #FFC0CB 225px, #00FFFF 0, #00FFFF 100%);
background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 0);
.Простое решение для достижения "разделить на две" фон:
Вы также можете использовать градусы в качестве направления
источник
Вы можете сделать жесткое различие вместо линейного градиента, установив второй цвет на 0%
Например,
Градиент -
background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);
Жесткое различие -
background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);
источник
Итак, это ужасно старый вопрос, на который уже есть принятый ответ, но я считаю, что этот ответ был бы выбран, если бы он был опубликован четыре года назад.
Я решил это исключительно с помощью CSS и без дополнительных элементов DOM! Это означает, что два цвета - это просто фоновые цвета ОДНОГО ЭЛЕМЕНТА, а не фоновые цвета двух.
Я использовал градиент и, поскольку я установил цветовые остановки так близко друг к другу, похоже, что цвета различны и что они не смешиваются.
Вот градиент в родном синтаксисе:
Цвет
#74ABDD
начинается в0%
и все еще#74ABDD
в49.9%
.Затем я заставляю градиент сместиться к следующему цвету в пределах
0.2%
высоты элементов, создавая очень сплошную линию между двумя цветами.Вот результат:
А вот и мой JSFiddle!
Радоваться, веселиться!
источник
background: repeating-linear-gradient(var(--grayLight), var(--grayLight) 430px, rgba(0,0,0,0) 201px, rgba(0,0,0,0) 100%);
это должно работать с чистым CSS.
проверено только в Chrome.
источник
В прошлом проекте, который должен был поддерживать IE8 +, я достиг этого, используя изображение, закодированное в формате data-url.
Изображение было 2800x1px, половина изображения белая, а половина прозрачная. Работал довольно хорошо.
Вы можете увидеть это работает здесь JsFiddle . Надеюсь, это может кому-то помочь;)
источник
Я использовал,
:after
и он работает во всех основных браузерах. пожалуйста, проверьте ссылку. просто нужно быть осторожным с z-индексом, так как после этого он имеет абсолютную позицию.скриптовая ссылка
источник
Вы можете использовать
:after
псевдоселектор для достижения этого, хотя я не уверен в обратной совместимости этого селектора.Я использовал это, чтобы иметь два разных градиента на фоне страницы.
источник
Используйте на своем изображении BG
Вертикальный разрез
Горизонтальное разделение
пример
источник
background-position: center center
Один из способов реализовать вашу проблему - ввести одну строку внутри вашего div:
Вот демонстрационный код и другие опции (горизонтальные, диагональные и т. Д.), Вы можете нажать «Выполнить фрагмент кода», чтобы увидеть его вживую.
источник
Наиболее пуленепробиваемым и семантически правильным вариантом будет использование псевдоэлемента с фиксированной позицией (
::after
или::before
). Используя эту технику, не забудьте установитьz-index
элементы внутри контейнера. Также помните, чтоcontent:""
правило для псевдоэлемента необходимо, иначе оно не будет отображено.Пример из жизни: https://jsfiddle.net/xraymutation/pwz7t6we/16/
источник
источник
Это пример, который будет работать в большинстве браузеров.
В основном вы используете два цвета фона, первый из которых начинается с 0% и заканчивается на 50%, а второй начинается с 51% и заканчивается на 100%
Я использую горизонтальную ориентацию:
Для различных настроек вы можете использовать http://www.colorzilla.com/gradient-editor/
источник
если вы хотите использовать
linear-gradient
с 50% высоты:источник