Background body color html: How to set background color in HTML?

 <стиль>
тело {
    фоновый цвет:
}
. что бы ни {
    Максимальная ширина:
    минимальная ширина:
    маржа: авто;
    заполнение:
    задний план:
}

<тело>
<дел>
ВСЕ СОДЕРЖАНИЕ МОЕЙ СТРАНИЦЫ

 
    <заголовок>
<стиль>
  HTML {
        цвет фона: черный;
        /* проверяем, будет ли он работать */
        переполнение: скрыто;
        высота: 0px;
    }
    .главный {
        переполнение: скрыто;
        дисплей: блок;
        ширина: ?;
        высота: авто;
    }

<тело>
    
  


 

 

<голова>
    <мета-кодировка="utf-8">
    

    <тип стиля="текст/CSS">
тело {
    цвет фона:#bdf;
    заполнение: 0;
    маржа: 0;
}
.внешний {
    максимальная ширина: 960 пикселей;
    мин-высота: 100vh;
    цвет фона:#fdb;
    поле:0 авто;
}
    

<тело>
<дел>

2 лайков

ТехноКид 21 июня 2017 г., 14:46

Привет, Эмго, спасибо. К сожалению, это тоже не сработало; это то же самое, но теперь выровнено по левому краю, а не по центру.

Не помню, прогонял ли я эту версию через валидаторы; Спасибо за напоминание!

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

ронпат, спасибо; это почти то, что я ищу. Я предпринял ленивую попытку просто добавить ваш min-height:100vh; к моему коду, но это дало мне только фон для видимой части экрана; нет фона, если я прокрутил вниз. В любом случае, я попробую это с моим существующим кодом и посмотрю, поможет ли он.

А пока, есть ли способ избавиться от синего пространства в самом низу оранжевого центра (видно, если добавить много строк текста)? Поля уже 0.

Спасибо.

ТехноКид 21 июня 2017 г., 14:55

#9

Привет, ронпат; нет, он по-прежнему показывает фон только для видимой области.

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

Спасибо.

ронпат 21 июня 2017 г., 14:56

#10

ЕСЛИ цвет фона не совпадает с высотой страницы в вашем коде, но он соответствует моему коду (он должен применяться к div-оболочке с содержимым внутри оболочки), то вы применяете его не к тому контейнеру .

Пожалуйста, опубликуйте рабочую страницу с соответствующими HTML и CSS, демонстрирующими проблему (по запросу coothead), чтобы мы могли увидеть, что вы видите, и код, который ее вызывает.

2 лайка

зак1 21 июня 2017 г., 17:07

#11

Между прочим, если контейнер div не увеличивается по вертикали вместе с содержимым, возможно, содержимое не в потоке. Если вы используете числа с плавающей запятой или абсолютные позиции, контейнер не будет расти вместе с ними.

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

Еще один потенциал с поплавками, возможно, вы можете попробовать добавить четкий поплавок в нижней части контейнера div. Вот так:

 

... содержание...
  <дел>

 

Добавление очистки в нижней части контейнера заставит контейнер «расти» до самого длинного содержимого, если у вас там есть поплавки.

Помимо этого, как уже говорили другие, поможет снимок экрана или пример кода. Сделайте снимок экрана и скройте все конфиденциальное. Это немного сложно визуализировать.

1 Нравится

ТехноКид 21 июня 2017 г.

#12

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

https://jsfiddle.net/kbq7ymbk/58/

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

Все правильное кодирование выполнено пользователем Paul_Wilkins; центрирование делал я, поэтому не работает! Хаха.

Спасибо.

ПолОБ 22 июня 2017 г., 7:46

№13

Привет,

Вам уже пару раз давали ответ, но, очевидно, вы упустили важные понятия или, возможно, упустили их из виду 🙂

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

Добавьте в свою скрипку следующий код, а затем сообщите нам, если это не то, что вы хотели?

 HTML, тело {
  маржа: 0;
  заполнение: 0;
  высота:100%;
}
.главный{
  минимальная высота: 100%;
  мин-высота: 100vh;
 box-sizing:border-box;
  }
 

Чтобы основной контейнер занимал высоту окна просмотра, вы можете использовать min-height:100vh (не высота (никогда не используйте высоту, если вы не знаете, почему это возможно)). Только современные браузеры понимают vh, поэтому для отката вы устанавливаете html и body на высоту: 100% (потому что в этом примере они могут переполниться без последствий), а затем используете min-height: 100% в основном контейнере, как в коде I. указано выше,

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

4 лайков

ТехноКид 22 июня 2017 г. , 11:44

№14

Спасибо, ПолОБ.

В конце концов, у меня все еще та же проблема, о которой я говорил в своем посте № 8 для ronpat. т. е. оранжевой является только видимая область экрана, а не ниже. Я добавил в список еще несколько опций, чтобы лучше показать эффект. Если вы прокрутите страницу вниз, все ли будет оранжевым в конце? Вы упомянули, что только современные браузеры понимают vh; Я все еще использую древнюю версию Firefox, так что, возможно, она мне просто не подходит. В данный момент я не могу выполнить обновление, так как мой компьютер не позволяет мне это сделать, но я смогу протестировать его в IE9./10 за несколько дней.

https://jsfiddle.net/kbq7ymbk/59/

Спасибо.

ПолОБ 22 июня 2017 г., 12:38

№15

ТехноКид:

т. е. оранжевой является только видимая область экрана, дальше вниз не идет.

В скрипте, который вы написали, это неправда, и теперь оранжевый цвет перемещается в нижнюю часть области просмотра. Код, который я вам дал, в любом случае должен работать обратно в IE6, но, как правило, в наши дни я не поддерживаю меньше, чем IE11, и вы тоже не должны. (Старые браузеры представляют собой серьезную угрозу безопасности, и никто не должен их использовать. Недавние атаки программ-вымогателей, которые несколько недель назад привели к остановке многих крупных финансовых учреждений, были вызваны старым программным обеспечением, и теперь мы должны активно поощрять наших пользователей к обновлению до более безопасные альтернативы.)

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

Скрипка должна работать в любой версии Firefox, выпущенной в этом веке, поэтому, возможно, вы не очистили свой кеш или, возможно, у вас поврежден кеш.

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

Наконец, вы также должны тестировать в реальной среде, так как «скрипки» подходят для быстрых тестов, но не всегда дают точную картину. В любом случае, я нахожу «codepen» намного лучше, чем скрипка, и более надежным.

5 лайков

тупица 22 июня 2017 г., 13:11

№16

ТехноКид:

Все правильное кодирование было выполнено пользователем Paul_Wilkins;
центрирование делал я, поэтому не работает!
Ха-ха.

Несмотря на то, что в вашем коде есть многочисленные ошибки кодирования
, которые могут привести к сбою проверки, решение
вашей актуальной проблемы состоит в том, чтобы просто изменить это…

 #categories [type="checkbox"] {
  положение: абсолютное;
  слева: -9999px;
 } 

…в этот

 #categories [type="checkbox"] {
  положение: абсолютное;
  верх: -9999em;
 } 

Работа сделана, мы все можем идти домой.

головка

3 нравится

ТехноКид 22 июня 2017 г., 14:41

# 17

PaulOB, да, я знаю, извините, но у меня сейчас нет выбора; Я застрял с очень старым Firefox, так как мой компьютер в настоящее время не позволяет мне установить более новую ОС и, следовательно, браузер. Я был так занят этим, что у меня просто не было времени починить свой компьютер! Это компьютер с Linux, поэтому у меня нет IE, однако готовая веб-страница будет использоваться в IE9 и 10, поэтому на них все должно работать правильно.

В моем конце действительно не хватало оранжевого фона.

Да, все мои собственные тесты основаны на локальных файлах; Я использую скрипку для публикации и быстрых тестов, как вы говорите.

О-о-о, болван! Что я могу сказать? Не обращайте внимания на эту проблему, ваш совет — это то, что решило другую проблему, с которой я столкнулся и пытался решить в течение самого долгого времени !!!

Что касается этого вопроса, комбинация вашего маленького наконечника и min-height ronpat и PaulOB: 100vh; это то, что заставило всех работать здесь, включая мой собственный оригинальный код!

Всем большое спасибо!

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

https://jsfiddle. net/kbq7ymbk/62/

Спасибо.

ПолОБ 22 июня 2017 г., 17:12

# 18

ТехноКид:

Еще одна последняя проблема: я предпочитаю иметь постоянно видимую вертикальную полосу прокрутки (которая у меня есть), поскольку это предотвращает перескакивание страницы, когда она продолжает появляться и исчезать, когда требуется прокрутка, однако есть ли причина, по которой существует прокрутка «кнопка» и прокрутка страницы, если это всего лишь одна страница и нет содержимого для прокрутки?

У вас нет постоянно видимой полосы прокрутки в области просмотра, так как у вас нет механизма для ее предоставления. Обычно вы просто используете html{overflow-y:scroll} , и это поможет.

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

1 Нравится

Зак1 22 июня 2017 г., 19:01

# 19

Кстати, вы могли бы исправить это, установив position:relative; в контейнере #. Это связано с тем, что если вы делаете абсолютную позицию, она должна основываться на родительском элементе с нестатической позицией. В вашем случае это может быть только позиция на основе тела.

Происходит немного сложно.

Несмотря на то, что вы установили left:-1000px для входов , он все равно занимал вертикальное пространство из-за меток . Метки не содержатся во входных данных, они представляют собой отдельную строку и теги

между ними.

Если вы вместо этого установите position:relative для #container, абсолютная позиция будет относительно этого блока, и все будет работать нормально.

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

Что меня удивляет, так это то, что даже если у вас есть прокрутка переполнения по списку, вертикальное пространство все еще влияет на тело. Такого я еще не видел, пытаюсь уложить в голове.

1 Нравится

22 июня 2017 г., 19:17

#20

зак1:

Что меня удивляет, так это то, что, несмотря на то, что у вас есть прокрутка переполнения по списку, вертикальное пространство все еще влияет на тело.

Привет,

Сворачивающееся поле, о котором упомянул Пол, находится в абзаце в форме поиска, за пределами раздела категорий, поэтому параметр переполнения не влияет на него.

2 «Нравится»

следующая страница →

Советы по дизайну для использования цветов фона в электронной почте

Содержание

Как вы добавляете визуального интереса к своим электронным письмам? Если вы похожи на большинство брендов, вы, вероятно, в значительной степени полагаетесь на изображения и графику продуктов. В этом нет ничего плохого. Но вы, возможно, упускаете из виду простой способ сделать ваши маркетинговые электронные письма яркими: цвет фона CSS для электронных писем!

Цвета фона могут упорядочивать содержимое и устанавливать иерархию. Когда они используются за изображениями, они могут даже усилить ваш дизайн, когда просмотр изображений отключен. Кроме того, цвета фона HTML отображаются во всех почтовых ящиках, и их легко создать.

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

Во многих электронных письмах используется белый фон, а для верхних и нижних колонтитулов используется цветовая блокировка. Это визуально отделяет вводное и заключительное содержимое от основного текста электронного письма. Видите, как это сообщение Crate & Barrel имеет бело-серый фон в теле сообщения, но включает красный всплеск в заголовке?

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

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

Создайте свой адрес электронной почты

Настройте один из наших
200+ шаблонов для мобильных устройств .
И освободите свое время с помощью нашего редактора перетаскивания
!

Регистрация не требуется

Подробнее

№1. Комбинируйте изображения и цвета фона

Электронные письма, полностью состоящие из изображений (с небольшим количеством обычного текста или без него), вызывают проблемы. Некоторые люди вообще не смогут увидеть электронное письмо, состоящее только из изображений, из-за настроек своего почтового клиента. Письма, содержащие только изображения, часто попадают в папку со спамом или загружаются не полностью. И они не оптимизированы для мобильных устройств. Вот почему мы всегда настаиваем на том, чтобы в эффективных электронных письмах был баланс изображений и обычного текста (не менее 500 символов текста).

Ознакомьтесь с этим письмом от Moo, веб-сайта, который помогает создавать и печатать визитные карточки, сначала с отключенным просмотром изображений:

А затем с включенными изображениями:

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

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

Чтобы отправить такое сообщение, три элемента электронного письма должны совпадать:

1. Цвет фона фотографий
2. Цвет фона HTML в текстовом разделе
3. Цвет фона текста ALT, когда изображения не отображаются.

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

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

А вот электронное письмо с изображениями:

Как и Moo, Logitech может создавать цветные блоки, комбинируя простые текстовые модули и изображения с соответствующими цветами фона CSS электронной почты. Разделы не могли быть более четко различимы. Оба письма оптимизированы с помощью безопасного для электронной почты текста и пуленепробиваемых кнопок, которые всегда будут отображаться. А стилизованный текстовый фон ALT поддерживает структуру дизайна, даже когда изображения недоступны для просмотра. Это отличный способ заставить цвета фона работать с фотографиями ваших продуктов, чтобы создать яркое, смелое электронное письмо, которое привлекает внимание и отличается от стерильного белого фона.

Может быть сложно отказаться от типичного белого фона, а использование цветного фона в электронной почте может значительно изменить его влияние на читателей. Помните, что 90% оценки продукта основано исключительно на цвете. Поэтому, когда вы используете цвет способом, который потенциально может быть довольно подавляющим, например, сверху вниз в электронном письме, разумно подумать о чувстве, которое вы хотите вызвать в первую очередь. Из того, что мы видели, бренды, которые хорошо с этим справляются, выбирают фирменный цвет светлого оттенка.

Вот электронное письмо от Chobani, в котором в качестве фона используется бледно-коричневый фирменный цвет:

Everyday Needs использует аналогичный подход в этом сообщении, используя светло-серый цвет:

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

Один из наших любимых способов использовать яркие цвета фона CSS электронной почты в электронной почте — раздел за разделом. Это одно из самых эффективных организационных применений цвета, позволяющее четко определить, где заканчивается один раздел и начинается другой. Недавно мы получили электронное письмо от Дрейпера Джеймса, которое является отличным примером этого:

Синяя, белая и бледно-персиковая части четко выделяются. Цвета фирменные и дополняют друг друга. И легко перемещаться по сообщению, чтобы найти то, что вам нужно.

Точно так же Otherwild использует жирный фон для разделения различных модулей этого электронного письма:

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

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