Содержание

HTML вход CSS цвет фона не применяется



У меня есть странное поведение CSS на элементах input[type=number] , которое приводит к тому, что набор background-color не применяется. Стиль color применяется к тексту ввода правильно, и инструменты разработки Chrome показывают цвет фона как активный на элементе, но фактическое входное значение отображается с другим цветом фона (светло-серый, а не черный #000, как показано на рисунке).

Кто-нибудь сталкивался с подобным поведением? Есть ли другие свойства CSS, которые могут быть причиной этого?

Любые предложения или решения по этому вопросу очень ценятся. Заранее спасибо!

html css
Поделиться Источник jcruz     27 апреля 2020 в 15:37

7 ответов

  • цвет фона css не получишь применяется для ace:textEntry

    Я использую icefaces 3.

    2. У меня есть проблема css с моим полем ввода. У меня есть textentry, который выглядит следующим образом <ace:textEntry id=custName value=#{strformbean.customer1.custName} size=20 maxlength=50 label=Customer Name required=true styleClass=requiredField /> <style…

  • Измените цвет фона изображения в HTML или CSS

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


3

В дополнение ко всему вышесказанному.

  1. В консоли переключите вкладку стили на вычисляемые , и вы увидите все свойства, которые могут повлиять на ваш input .
  2. Этот странный серый цвет- #e8e8e8 или rgb(232,232,232) . попробуйте найти его в ваших файлах css.
  3. В вас есть много классов input . Попробуйте удалить их один за другим в консоли и посмотреть, что произойдет.

И вы можете хотя бы попытаться null text-shadow , конечно. Используя текстовую тень, я мог бы получить тот же результат, что и вы.

input {
    text-shadow: none !important;
}

Поделиться focus.style     06 мая 2020 в 15:34


2

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

И о том, что цвет фона не применяется; на самом деле он применяется, как я вижу: вход имеет ширину 50px в соответствии с css, и я вижу в инспекторе, что это ширина 50px, так что черный цвет вокруг значения-это цвет фона, как вы его задали.

Только значение имеет серый цвет вокруг него. И: поскольку установка background-color !important переопределяет сам background-color, она не переопределяет свойства фона ALL (если, например, где-то еще был объявлен фон IMAGE, то он не будет переопределен)

Итак, список возможных объяснений:

  • Фоновое изображение может быть установлено.
  • Серый фон может быть предварительно заполненным фоном вашего браузера, который появляется, когда входное значение автоматически заполняется из сохраненной памяти. Например, Chrome устанавливает фон, который обычно желтый (но в вашем случае может быть серым). Вы можете попытаться выяснить, так ли это в случае с:
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
  • Входные данные могут где-то иметь all: unset , который переопределяет другие объявления css
  • Расширение браузера может возиться с вашим html/css.
    откройте страницу в анонимной вкладке (которая обычно имеет отключенные расширения).
  • Там может быть какой-то набор псевдо-селекторов css ::, который изменяет цвет, прокрутите вниз в инспекторе элементов, чтобы увидеть. Обычно они находятся внизу. например, input::valid

Поделиться Hacktisch     04 мая 2020 в 08:04


1

Я думаю, что вы столкнулись с этой проблемой, потому что autofill css свойство
, которое привело мой дефолт через css. Если вы хотите переопределить его используйте этот код:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: red !important;
}

вы можете изменить цвет фона, как вы хотите, заменив «white» в первой строке вы можете изменить цвет текста, как вы хотите, заменив «red»

Поделиться Aslam khan     04 мая 2020 в 14:44

  • CSS Цвет Фона

    Я уже больше часа ищу, откуда берется этот зеленоватый цвет фона. Я обыскал все. одиночный. файл. Это сводит меня с ума. У кого-нибудь есть какие-нибудь предложения? Конечно, это не должно быть в файлах .js, верно? Я не могу найти этот цвет нигде в файлах .html или .css. Вы увидите это, если…

  • CSS цвет не применяется

    У меня есть CSS: .homepagebox {color: #2F2561 !important; margin-bottom: 16px !important;} и <p class=homepagebox><strong>Home Loans</strong></p> но цвет не применяется. Живая страница здесь .


1

Если вы используете Angular и изменения стиля в HTML или CSS не видны, примените следующий подход:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ... 
    encapsulation: ViewEncapsulation.None
})

Надеюсь, это поможет.

Поделиться Murat Yıldız     03 мая 2020 в 20:26


0

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

Поделиться Chetan Naik     06 мая 2020 в 10:48


0

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

Поделиться Tobi Adedipe     06 мая 2020 в 18:05


-1

Почему бы вам не попробовать класс alert для цвета фона входного тега. Они выглядят очень хорошо для входных тегов.

Даже у меня однажды была эта проблема, и использование класса alert хорошо работало для меня.

Поделиться Prateek Gupta     04 мая 2020 в 14:25

Похожие вопросы:


CSS цвет фона игнорируется

Я пытаюсь сделать стильный пользовательский стиль для всех страниц на www.livejournal.com. Я хочу стилизовать текст и выбрать поля ввода типа с определенным цветом фона, но цвет bg не…


CSS: цвет фона не применяется при отображении горизонтальной полосы прокрутки

Это markup <div style=background-color: red;> abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd </div> работает правильно, когда окно браузера достаточно широкое, но когда…


CSS стиль не применяется к контейнеру div

Стиль CSS работает (насколько я вижу) для всех элементов, кроме контейнера div. Я не могу заставить его работать, я перепробовал все. Он должен иметь ширину и высоту и черный цвет фона. Это код,…


цвет фона css не получишь применяется для ace:textEntry

Я использую icefaces 3.2. У меня есть проблема css с моим полем ввода. У меня есть textentry, который выглядит следующим образом <ace:textEntry id=custName value=#{strformbean.customer1.custName}…


Измените цвет фона изображения в HTML или CSS

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


CSS Цвет Фона

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


CSS цвет не применяется

У меня есть CSS: .homepagebox {color: #2F2561 !important; margin-bottom: 16px !important;} и <p class=homepagebox><strong>Home Loans</strong></p> но цвет не применяется. …


есть ли способ применить цвет фона через css на уровне tr?

Есть ли способ применить цвет фона через CSS на уровне TR? Я могу применить его на уровне TD вот так: .my-td{ background-color: #E8E8E8; background:#E8E8E8; } Однако цвет фона, похоже, не…


Можно ли применить цвет фона к элементу, который не применяется к границе? (CSS)

В CSS3 можно ли применить цвет фона к элементу,который не применяется к границе? Когда вы используете: element { background: red; } цвет фона также применяется к пограничной области.


Цвет фона не применяется

Я новичок в веб-программировании и на самом деле изучаю html и css, и у меня есть проблема с применением цвета фона в некоторых частях моей веб-страницы. Может ли кто-нибудь помочь мне применить…

Свойство background-color | CSS справочник

CSS свойства

Определение и применение

CSS свойство background-color определяет цвет фона элемента. Фон элемента представляет из себя общий размер элемента, включающий значения padding (внутренние отступы элемента) и border (границы), но не включая значение свойства margin (внешние отступы элемента). Значение цвета допускается указывать как в шестнадцатиричной системе, так и в системах RGB, RGBA, HSL, HSLA, так и с помощью предопределенных цветов.

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

Подробную информацию об использовании цветов в HTML и CSS, способах указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов, вы сможете найти в следующих статьях учебников:

Поддержка браузерами

CSS синтаксис:

background-color: "color | transparent | initial | inherit";

JavaScript синтаксис:

object.style.backgroundColor="#00FF00"

Значения свойства

ЗначениеОписание
colorОпределяет цвет фона (HEX, RGB, RGBA, HSL, HSLA, «Предопределённые цвета»).
transparentУказывает, что цвет фона должен быть прозрачным. Значение по умолчанию.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование CSS свойства background-color </title>
<style> 
body {
background-color:CornflowerBlue;
}
h3 {
background-color:#FFFF00;
}
p {
background-color:rgb(0,255,0);
}
</style>
</head>
	<body>
		<h3>Заголовок второго уровня</h3>
		<p>Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
	</body>
</html>

В этом примере мы с использованием CSS свойства background-color указали цвет заднего фона для:

  • Элемента <body> с использованием предопределенного цвета (CornflowerBlue).
  • Элемента <h3> с использованием шестнадцатиричного значения цвета (#FFFF00 — желтый).
  • Элемента <p> с использованием системы RGB (rgb(0,255,0) — зеленый).

Результат нашего примера:

Пример использования свойства background-color.CSS свойства

Примеры для изменения цвета фона, текста с помощью CSS

Рассмотрим несколько примеров по изменению CSS:

 

Пример 1. Изменение фона.

В этом примере мы рассмотрим, как можно изменить фон в каталоге. Первоначально каталог выглядит так:

 

Выбираем с помощью Firebug (кнопка F12) необходимый нам элемент:

 

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

 

Красной рамкой обведен код, который мы вставляем сейчас.  После сохранения цвет фона элемента изменился на выбранный нами:

 

Пример 2. Изменение цвета кнопки.

Изменим цвет кнопки «Обратный звонок». Мы хотим сделать так, чтобы изменился ее цвет до нажатия с оранжевого на изумрудный:

 

Выбираем необходимый элемент:

 

Добавляем код, который изменяет цвет кнопки до нажатия:

 

И, нажав на кнопку «Сохранить», смотрим на результат:

 

Пример 3. Изменение шрифта.

Теперь изменим шрифт кнопки «Корзина товаров». Выбираем нужный нам элемент, ищем нужный участок кода:

 

Мы хотим сделать эту надпись синей, отображать ее увеличенной и с курсивом. Для этого вставляем следующий код:

И видим, как изменилась кнопка «Корзина товаров»:

 

Пример 4. Изменение стиля заголовков.

При редактировании заголовков не появляется поле визуального редактора, и изменить их цвет, размер и шрифт можно только с помощью CSS. Итак, выбираем заголовки и видим, что у класса «h3_content» нет определенного готового правила.

 

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

И после сохранения изменений посмотрим на изменившиеся заголовки:

 

Пример 5. Изменение стиля ссылок.

Ссылка может иметь несколько состояний. Например, есть посещенные и непосещенные ссылки, также можно задавать выделение ссылки курсором. Возьмем страницу с 3 ссылками, выделим ссылку курсором и в окне firebug в разделе «Стиль» нажмем на style.css?106(строка 165).

 

Как только мы кликнем на эту ссылку, раскроется файл style.css на 165 строке, и мы сможем увидеть, как описаны правила ссылок.

Псевдокласс link отвечает за непосещенные ссылки, visited — за посещенные. Псевдокласс hover срабатывает при наведении курсора. Изменим цвет непосещенных ссылок на зеленый, цвет посещенных — на красный, а при наведении цвет сделаем фиолетовым и уберем подчеркивание ссылки (за это отвечает правило text-decoration:none):

Теперь ссылки внешне выглядят совершенно по-другому:

 

Пример 6. Сдвиг и размер блоков.

За расстояние между элементами отвечает правило margin, за расстояние между контентом элемента и его границей — padding. Изменить ширину блока можно с помощью правила width. Выберем элемент, который мы будем изменять:

Теперь запишем следующие изменения: увеличим padding до 100 пикселей и установим отступ margin сверху и слева по 50 пикселей:

Внешний вид элемента станет таким:

Теперь изменим ширину элемента. Выделяем нужный элемент:

 

и добавляем измененное правило для класса .right_block — уменьшим его ширину width на 200 пикселей:

 

Теперь блок стал заметно уже:

 

Пример 7. Рамки блоков.

Вы можете изменять границу блоков с помощью правила border — например, задавать закругление с помощью border-radius. Также в данном примере рассмотрим, как добавлять тень к элементу с помощью box-shadow.  

Поставим больше закругление у элемента — увеличим значение border-radius до 50 пикселей, саму границу сделаем жирнее (5 пикселей) и сделаем ее зеленой, также добавим черную тень снизу и справа с помощью box-shadow:

Окончательно элемент будет выглядеть так:

 

Пример 8. Скрыть элемент.

Вы можете скрыть любой элемент с помощью правила display: none. В качестве примера скроем надпись в футере сайта:

Добавим в CSS-редактор правило для класса footer_text, изменив значение параметра display:

Теперь выбранный текст из футера не будет виден пользователям:

 

Пример 9. Заменить логотип.

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

Так логотип выглядел до изменений:

 

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

После внесения данных правил логотип выглядит следующим образом:

Как установить цвет фона CSS HTML с помощью JavaScript

Изменение CSS для

HTMLElement

Вы можете изменить большинство свойств CSS с помощью JavaScript, используйте этот оператор:

 document.querySelector(<selector>).style[<property>] = <new style>

где <selector> , <property> , <new style> — все объекты String .

Обычно свойство style будет иметь то же имя, что и фактическое имя, используемое в CSS. Но всякий раз, когда существует более одного слова, это будет случай верблюда: например, background-color изменяется на backgroundColor .

Следующий оператор установит фон для #container на красный цвет:

 documentquerySelector('#container'). style.background = 'red'

Вот небольшая демонстрация изменения цвета окна каждые 0,5 с:

 colors = ['rosybrown', 'cornflowerblue', 'pink', 'lightblue', 'lemonchiffon', 'lightgrey', 'lightcoral', 'blueviolet', 'firebrick', 'fuchsia', 'lightgreen', 'red', 'purple', 'cyan']

let i = 0
setInterval(() => {
  const random = Math.floor(Math.random()*colors.length)
  document.querySelector('.box').style.background = colors[random];
}, 500)  
 .box {
  width: 100px;
  height: 100px;
}  
 <div></div>

Изменение CSS нескольких

HTMLElement

Представьте, что вы хотите применить стили CSS к нескольким элементам, например, сделать цвет фона всех элементов с именем класса box lightgreen . Тогда вы можете:

  1. выберите элементы с помощью .querySelectorAll code> и разверните их в объекте с помощью синтаксис деструктурирования :

     Array

  2. переберите массив с помощью const elements = [. ..document.querySelectorAll('.box')] и примените изменения к каждому элементу:

     .forEach

Вот демоверсия:

 elements.forEach(element => element.style.background = 'lightgreen')
  
 const elements = [...document.querySelectorAll('.box')]
elements.forEach(element => element.style.background = 'lightgreen')  
 .box {
  height: 100px;
  width: 100px;
  display: inline-block;
  margin: 10px;
}

Другой метод

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

Предполагая, что вы можете заранее подготовить стили в CSS, вы можете переключать классы, открывая <div></div> <div></div> <div></div> <div></div> элемента и вызывая функцию classList :

 toggle  
 document. querySelector('.box').classList.toggle('orange')  
 .box {
  width: 100px;
  height: 100px;
}

.orange {
  background: orange;
}

Список свойств CSS в JavaScript

Вот полный список:

 <div></div>  alignItems
alignSelf
animation
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationName
animationTimingFunction
animationPlayState
background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
backgroundClip
backgroundOrigin
backgroundSize</a></td>
backfaceVisibility
borderBottom
borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomStyle
borderBottomWidth
borderCollapse
borderColor
borderImage
borderImageOutset
borderImageRepeat
borderImageSlice
borderImageSource
borderImageWidth
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRadius
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderSpacing
borderStyle
borderTop
borderTopColor
borderTopLeftRadius
borderTopRightRadius
borderTopStyle
borderTopWidth
borderWidth
bottom
boxShadow
boxSizing
captionSide
clear
clip
color
columnCount
columnFill
columnGap
columnRule
columnRuleColor
columnRuleStyle
columnRuleWidth
columns
columnSpan
columnWidth
counterIncrement
counterReset
cursor
direction
display
emptyCells
filter
flex
flexBasis
flexDirection
flexFlow
flexGrow
flexShrink
flexWrap
content
fontStretch
hangingPunctuation
height
hyphens
icon
imageOrientation
navDown
navIndex
navLeft
navRight
navUp>
cssFloat
font
fontFamily
fontSize
fontStyle
fontVariant
fontWeight
fontSizeAdjust
justifyContent
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
minHeight
minWidth
opacity
order
orphans
outline
outlineColor
outlineOffset
outlineStyle
outlineWidth
overflow
overflowX
overflowY
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
pageBreakInside
perspective
perspectiveOrigin
position
quotes
resize
right
tableLayout
tabSize
textAlign
textAlignLast
textDecoration
textDecorationColor
textDecorationLine
textDecorationStyle
textIndent
textOverflow
textShadow
textTransform
textJustify
top
transform
transformOrigin
transformStyle
transition
transitionProperty
transitionDuration
transitionTimingFunction
transitionDelay
unicodeBidi
userSelect
verticalAlign
visibility
voiceBalance
voiceDuration
voicePitch
voicePitchRange
voiceRate
voiceStress
voiceVolume
whiteSpace
width
wordBreak
wordSpacing
wordWrap
widows
writingMode
zIndex
>

CSS свойство background-color

CSS свойство background-color устанавливает цвет фона элемента. Фон элемента совпадает с общим размером элемента, включая отступ и границу (без внешнего отступа).

Для установления цвета фона необходимо выбрать какой-либо цвет. Вы можете выбрать цвет из нашего инструмента Color Picker. Цвет может быть обозначен следующими способами: название цвета-«red» HEX значение -«#ff0000» и RGB значение-«rgb(255,0,0)».

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

Синтаксис¶

background-color: color | transparent | initial | inherit;

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: #8ebc42;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства background-color</h3>
    <p>Здесь установлено свойство background-color со значением hex. </p>
  </body>
</html>
Попробуйте сами! Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства background-color. Узнать больше о HTML Colors.

Рассмотрим пример со значением transparent:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: transparent;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства background-color</h3>
    <p>В данном примере установлено значение transparent для background-color. Является значением по умолчанию.</p>
  </body>
</html>
Попробуйте сами!

В следующем примере можно увидеть анимируемую версию:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: #eee;
      animation: mymove 5s infinite; 
      }
      @keyframes mymove {
      30% {background-color: #1c87c9;}
      }
    </style>
  </head>
  <body>
    <h3> Анимация свойства background-color</h3>
    <p>В данном примере постепенно меняется цвет фона с серого в синий и снова в серый. 
    <p> 
  </body>
</html>
Попробуйте сами!

Значения¶

Магия CSS. Глава 4. Цвет. Я знаю, что вы подумали. Целая глава… | by Workafrolic (±∞)

Все цвета RGB

Я знаю, что вы подумали. Целая глава про цвет? Поверьте мне, одной главы все равно не достаточно. Цвет — это целое измерение и он невероятно могущественен.

…для компьютеров

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

  • Цвета отображаются по разному в разных браузерах. Link.
  • На скриншоте не всегда будут те же цвета, что и на мониторе в момент снимка. Link.
  • В браузерах найдется ворох всевозможных проблем, связанных с цветопередачей. Link.

…и для человеческого глаза

То, как человеческий глаз видит цвет зависит от многих факторов, в том числе:

  • Тип устройства (ноутбук, ПК, мобильный телефон)
  • Расстояние и угол зрения
  • Качество дисплея (количество цветов, которое он может отобразить, точность воспроизведения, доступный угол обзора, максимальный контраст и т. д.)
  • Условия освещения (внутри или снаружи, день или ночь, возле окна или нет и т.д.)
  • Зрение смотрящего (корректирующие линзы, нарушения зрения, дальтонизм)

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

  • Выбирайте цвет, подходящий для текста (и для фона текста)
  • Используйте прием имитации объекта, чтобы помочь людям опознать предмет из реального мира
  • Используйте контраст для увеличения читабельности (никто не может читать белый текст на бежевом фоне)
  • Применяйте паттерны (когда это необходимо) в качестве запасного варианта для людей с дальтонизмом (пример Trello)

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

Как я писал выше, цвет является чрезвычайно мощным инструментом. Но с большой силой приходит большая ответственность 😉 Цвет используется для решения большого количества задач. Но применение цвета для одного объекта может наложить ограничения на использование того же цвета для какого-то другого объекта. Например, если вы для своего бренда выбрали определенный зеленый оттенок, то вам будет довольно трудно взять тот же зеленый для индикатора “go”.

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

Чувства

Вы знали, что красный цвет заставляет людей чувствовать голод? Link.

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

Вы хотите шокировать людей? Хотите успокоить их? Хотите заставить их доверять вам? Хотите привести их в восторг? Хотите заставить их действовать? Ответы на эти вопросы помогут вам в выборе цветов для вашего приложения.

Брендинг

Цвета на столько могущественны, что один цвет может означать бренд.

Сможете угадать бренды по цветам?

Ответ 1. Ответ 2. Ответ 3. Ответ 4.

Статус

Bootstrap популяризировал применение статусных классов, которые связаны с определенными цветами.

Много различных приложений используют эту или подобные схемы:

Постоянно используя #dff0d8 в случае успеха или #f2dede в случае опасности, вы укрепляете шаблон поведения, облегчая людям распознание подобных знаков в будущем.

Движение, внимание

Иногда вам нужно привлечь внимание пользователя. Плавное (или резкое) измение цвета фона или цвета текста может помочь вам добиться внимания.

Просто так

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

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

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

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

  • Codrops: Build a Color Scheme: The Fundamentals — Отличный обзор разных типов цветовых комбинаций (монохромные, добавочные, триады, аналоговые).
  • Color Scheme Designer — Хороший инструмент для построения цветовых схем с разными типами комбинаций цветов.
  • Adobe Kuler: Color Wheel —Еще один инструмент для составления схем.

Одна ошибка, которую я вижу чаще других — разработчик использует серый (#ccc) когда на самом деле нужно было использовать черный с альфа-каналом (rgba(0, 0, 0, 0.2)).

Но они выглядят одинаково! — скажете вы. Ну, да. Но только до тех пор, пока фон остается белым!

Пример

Каждый из белых блоков имеет тень box-shadow: 0 .125em .5em [color] с цветом из соответствующей колонки.

Как изменить цвет фона при выделении мышкой текста. Только CSS

При помощи простого правила CSS вы можете поменять цвет фона и шрифта при выделении текста мышкой.

Это не даст + при продвижении, но если у вас часто выделяют текст и копируют, то ваши посетители удивятся подобной штуке. Главное — подобрать цветовую гамму.

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

Внимание! Новый апдейт полностью заточенной под SEO + PageSpeed темы для сайта WP Romb — максимально быстро и максимально удобно. Настрой под себя уникальный дизайн за пару минут и собирай тысячи трафика. Всё на русском + обновления + техподдержка.

Меняем цвет при выделении мышкой

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

Добавляем в свой файл стилей шаблона (обычно style.css) следующие строки:

::-moz-selection{background: #000; color: #fff;} ::webkit-selection{background: #000; color: #fff;} ::selection{background: #000; color: #fff;}

::-moz-selection{background: #000; color: #fff;}

::webkit-selection{background: #000; color: #fff;}

::selection{background: #000; color: #fff;}

Сейчас мы задали правило для всех элементов на сайте. Можно задать для каких-то определенных свои настройки цвета. Например только для текста, который разбит на абзацы соотв. тегом:

p::-moz-selection{background: #000; color: #fff;} p::webkit-selection{background: #000; color: #fff;} p::selection{background: #000; color: #fff;}

p::-moz-selection{background: #000; color: #fff;}

p::webkit-selection{background: #000; color: #fff;}

p::selection{background: #000; color: #fff;}

В представленном коде мы делаем поддержку современных браузеров и задаем:

  • background: #000; — черный цвет фона. Можете менять на произвольный свой.
  • color: #fff; — цвет текста при выделении (сейчас белый). Так же меняйте на произвольный.

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

Кто хочет, может добавить сюда новый курсор, который будет работать только над выделенным текстом. В помощь статья Стилизованный курсор на любом сайте за минуту.

Я не сторонник E-mail рассылок, но поговаривают что этот суперкачественный сервис почтовых рассылок обеспечит получение прибыли при минимуме затрат. Кто занимается продажей товаров/услуг, должен оценить потенциал сервиса.

CSS свойство background-color

CSS свойство background-color устанавливает цвет фона элемента. Фон элемента — это его общий размер, который включает отступы и границу (но не поля).

Итак, для установки цвета фона нужно выбрать любой цвет. Вы можете выбрать цвета с помощью нашего инструмента «Палитра цветов». Цвет можно записать как следующие типы: название цвета — «красный», значение HEX — «# ff0000» и значение RGB — «rgb (255,0,0)».

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

Синтаксис¶ 

  цвет фона: цвет | прозрачный | начальная | наследовать;

Пример свойства background-color: ¶ 

  

  
    <стиль>
      тело {
        цвет фона: # 8ebc42;
      }
    
  
  
     
 Пример свойства "Цвет фона" 
 
    
 Здесь цвет фона указывается в шестнадцатеричном формате.
Попробуйте сами »
Вы можете установить шестнадцатеричные, RGB, RGBA, HSL, HSLA или названия цветов в качестве значения для свойства background-color. Узнайте больше о цветах HTML.

Пример свойства background-color со значением «transparent»: ¶ 

  

  
    <стиль>
      тело {
        цвет фона: прозрачный;
      }
    
  
  
     
 Пример свойства "Цвет фона" 
 
    
 В этом примере установлен прозрачный цвет фона.Это значение по умолчанию.
Попробуйте сами »

Пример анимированной версии свойства background-color: ¶ 

  

  
    <стиль>
      тело {
        цвет фона: #eee;
        анимация: mymove 5s infinite;
      }
      @keyframes mymove {
        30% {
          цвет фона: # 1c87c9;
        }
      }
    
  
  
     
 Анимация свойства background-color 
 
    

      В этом примере он постепенно меняет цвет фона с серого на синий и обратно на серый.
Попробуйте сами »

Values¶

Базовый CSS: цвета в CSS

/ ru / базовый CSS / стиль текста в CSS / контент /

Цвета в CSS

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

Цвет текста

Будь то элемент

, элемент


< / body>

Встроенный код CSS на странице устанавливает для элемента

background-color значение gainsboro в общем случае и значение darkslategray , если пользователь предпочитает цветовую схему dark согласно предпочтительной цветовой схеме пользовательской функции мультимедиа.

Через элемент страница сообщает браузеру, что он поддерживает темную и светлую тему, с предпочтением темной темы.

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

Обратите внимание на то, как цвет фона элемента

изменяется в зависимости от того, включен ли темный режим, в соответствии с правилами встроенной таблицы стилей, предоставленной разработчиком на странице. Это либо gainsboro , либо darkslategray .

Облегченный режим: Стили, указанные разработчиком и пользовательским агентом. Текст черный, а фон белый в соответствии с таблицей стилей пользовательского агента. Цвет фона элемента
равен gainsboro согласно встроенной таблице стилей разработчика. Темный режим: Стили, указанные разработчиком и пользовательским агентом. Текст белый, а фон черный в соответствии с таблицей стилей пользовательского агента. Цвет фона элемента
составляет darkslategray согласно встроенной таблице стилей разработчика.

Внешний вид элемента