Блог

Главная - Вопросы по программированию - CSS: Установите цвет фона, который составляет 50% ширины окна

CSS: Установите цвет фона, который составляет 50% ширины окна

#css #background-color

Вопрос:

Попытка создать фон на странице, который «разделен надвое»; два цвета на противоположных сторонах (по-видимому, это делается путем установки background-color body тега по умолчанию, а затем применения другого на a div , который растягивается на всю ширину окна).

Я действительно придумал решение, но, к сожалению background-size , свойство не работает в IE7/8, что является обязательным для этого проекта —

 body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

Поскольку речь идет только о сплошных цветах, может быть, есть способ использовать только обычное background-color свойство?

Ответ №1:

Поддержка Старых Браузеров

Если требуется более старая поддержка браузера, поэтому вы не можете использовать несколько фонов или градиентов, вы, вероятно, захотите сделать что-то подобное на запасном div элементе:

 #background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

Пример: http://jsfiddle.net/PLfLW/1704/

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

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

Современные браузеры

Если вас беспокоят только новые браузеры, вы можете использовать несколько других методов:

Линейный Градиент:

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

 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/

ДОПОЛНИТЕЛЬНОЕ ПРИМЕЧАНИЕ: Обратите внимание, что html body в последних примерах оба элемента и имеют значение height: 100% . Это делается для того, чтобы убедиться, что даже если ваш контент меньше страницы, фон будет по крайней мере на высоте окна просмотра пользователя. Без явной высоты эффект фона будет уменьшаться только до содержимого вашей страницы. Это также просто хорошая практика в целом.

Комментарии:

1. linear-gradient Жесткая отсечка также работает для пикселей: background: linear-gradient(90deg, #FFC0CB 225px, #00FFFF 0, #00FFFF 100%);

2. он работает с 50% на 50%, но он не работает, когда я заменяю его на 25% на 75%

3. @datdinhquoc Попробуй background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 0); .

Ответ №2:

Простое решение для достижения «разделения на два» фона:

 background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

Вы также можете использовать градусы в качестве направления

 background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

Комментарии:

1. Это круто, но это градиент. Можно ли провести жесткое различие?

2. Чтобы провести четкое различие между двумя цветами, используйте приведенный ниже ответ акаша, в котором второй процент равен 0%: background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Ответ №3:

Вы можете провести жесткое различие вместо линейного градиента, установив второй цвет равным 0%

Например,

Градиент — background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

Жесткое различие — background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Ответ №4:

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

Я решил эту проблему чисто с помощью CSS и без ДОПОЛНИТЕЛЬНЫХ ЭЛЕМЕНТОВ DOM! Это означает, что два цвета-это просто цвета фона ОДНОГО ЭЛЕМЕНТА, а не цвет фона двух.

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

Вот градиент в собственном синтаксисе:

 background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

Цвет #74ABDD начинается 0% и продолжается до сих #74ABDD пор 49.9% .

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

Вот результат:

Разделить Цвет Фона

А вот и мой JSFiddle!

Получайте удовольствие!

Комментарии:

1. На это можно даже пойти с пикселями. background: repeating-linear-gradient(var(--grayLight), var(--grayLight) 430px, rgba(0,0,0,0) 201px, rgba(0,0,0,0) 100%);

Ответ №5:

Один из способов решить вашу проблему-добавить одну строку в css вашего div:

 background-image: linear-gradient(90deg, black 50%, blue 50%);

Вот демонстрационный код и дополнительные параметры (по горизонтали, диагонали и т.д.), Вы можете нажать «Запустить фрагмент кода», чтобы увидеть его вживую.

 .abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
} 
 Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

Ответ №6:

это должно работать с чистым css.

 background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

протестировано только в Chrome.

Ответ №7:

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

Изображение было размером 2800×1 пикселей, половина изображения была белой, а половина прозрачной. Сработало довольно хорошо.

 body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

Вы можете увидеть, как это работает здесь, JsFiddle.
Надеюсь, это может кому-то помочь 😉

Ответ №8:

Я использовал :after , и он работает во всех основных браузерах. пожалуйста, проверьте ссылку. просто нужно быть осторожным с z-индексом, так как после имеет абсолютную позицию.

 <div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

ссылка на скрипку

Ответ №9:

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

 body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

Я использовал это, чтобы иметь два разных градиента на фоне страницы.

Комментарии:

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

Ответ №10:

если вы хотите использовать linear-gradient с 50% высоты:

 background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;

Ответ №11:

Используйте на своем изображении bg

Вертикальное разделение

 background-size: 50% 100%

Горизонтальное разделение

 background-size: 100% 50%

Пример

 .class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}

Комментарии:

1. как я могу установить этот фон в центре

2. пробовать: background-position: center center

Ответ №12:

Наиболее пуленепробиваемым и семантически правильным вариантом было бы использование псевдоэлемента с фиксированным расположением ( ::after или ::before ). Используя эту технику, не забудьте установить z-index значение для элементов внутри контейнера. Также имейте в виду, что content:"" правило для псевдоэлемента необходимо, иначе оно не будет отображаться.

 #container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

Живой пример:
https://jsfiddle.net/xraymutation/pwz7t6we/16/

Ответ №13:

 .background{
 background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);
 height:200px;
 
}

.background2{
  background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);

 height:200px;
 
} 
 <html>
<body class="one">

<div class="background">
</div>
<div class="background2">
</div>
</body>
</html>

Ответ №14:

Это пример, который будет работать в большинстве браузеров.
В основном вы используете два цвета фона, первый начинается с 0% и заканчивается на 50%, а второй начинается с 51% и заканчивается на 100%

Я использую горизонтальную ориентацию:

 background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

Для различных настроек вы можете использовать http://www.colorzilla.com/gradient-editor/

Метки: ,