Когда в HTML использовать цвет и в чем разница между background-color и тегом background?

В чем отличия?

Doggo

Ответов: 6

Ответы (6)

цвет относится к цвету текста в этом элементе.

background-color относится к цвету фона

фон - это сокращение для объединения множества фоновых тегов в одну строку.

background: #ffffff url("img_tree.png") no-repeat right top;

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

w3schools

Быстрый ответ

  • Цвет = Цвет текста
  • Background-color = цвет фона
  • Background = дает вам возможность установить цвет, изображение и т.д ...

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

Я дам вам пример с использованием этого элемента html:

Это мой текст

.value {color: red, background-color: black}

Цвет CSS используется для изменения цвета текста элемента html. В этом примере «Это мой текст» будет красным. Цвет фона CSS используется для изменения цвета фона, поэтому в этом случае вы получите черный ящик с красным текстом внутри него. Наконец, фон используется для установки всех свойств фона в одном объявлении. Например:

фон: # 00ff00 url ("smiley.gif") фиксированный центр без повтора;

Это изменяет цвет фона, добавляет изображение «smiley.gif» к фону и центрирует изображение, оно не повторяет изображение, если в нем есть пробел.

цвет: используется для добавления цвета к тексту внутри тега.

цвет: синий;

background-color: используется для добавления цвета фона содержимого внутри тега.

цвет фона: красный;

background: используется для добавления другого типа имени свойства фона к содержимому внутри тега.

фон: красный url ('image.png') фиксированный повтор обложки;

Одна важная особенность обоих свойств css заключается в том, что background-color не перезаписывает изображение или градиент, которые были установлены следующим образом:

фон: url ('https://example.com/image.jpg');

или

background: linear-gradient (to bottom, # 1e5799 0%, # 2989d8 20%, # 207cca 51%, # 7db9e8 100%);

Если вы пытаетесь изменить фон с изображения на цвет, вы должны использовать свойство background.

Это правда, что background дает больше возможностей по сравнению с background-color. Но если вам нужно установить только цвет фона, они точно такие же, и каждый будет перекрывать другой, как показано во фрагменте.

background: yellow;
background-color: yellow;

.bc {
  фон: желтый;
  цвет фона: зеленый;
}

.bc2 {
  цвет фона: зеленый;
  фон: желтый;
}
bc {фон: желтый; цвет фона: зеленый; }
bc {цвет фона: зеленый; фон: желтый; }

2022 WebDevInsider