Working with html color: how to change text and background colors

Что еще нужно знать про CSS background

Множественные фоны

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

Это можно делать либо через универсальное свойство :

Либо через отдельные свойства фона 

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

В приведенном ниже примере попробуйте изменить размеры основного элемента (потяните за его правый нижний угол).

Режимы наложения — background-blend-mode

По умолчанию, если у элемента задано и фоновое изображение и цвет заливки, изображение (конечно, если оно непрозрачное) просто перекрывает заливку. С множественными изображениями та же история — верхнее перекрывает нижнее.

В CSS можно указывать режим(ы) наложения фонов. Это делается при помощи свойства , которое поддерживается всеми современными браузерами.

Для всех, кто пользуется Фотошопом или Иллюстратором и знаком с режимами смешивания слоев (Blend Modes), это свойство будет очень кстати. Особенно учитывая, что названия режимов смешивания совпадают с названиями в графических редакторах:

1. normal
2. multiply
3. screen
4. overlay
5. darken
6. lighten
7. color-dodge
8. color-burn
9. hard-light
10. soft-light
11. difference
12. exclusion
13. hue
14. saturation
15. color
16. luminosity

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Background blend modes

Similar to the overlay method background blend method is not typical background image and color technique but is an advanced method of blending images and color or blending multiple images. CSS blend effect is more like the Photoshop blend effect.

There is a whole list of blend mode you can use

Here is the list:

• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

Adobe works on these elements and they have created a pen to play with these blend modes.

You can create some really cool image effects without any image editor.

.block {
  background: url(image.jpg) no-repeat 0, 0 #99e9ff;
  background-blend-mode: multiply;
  height: 200px;
  width: 280px;
}

Demo

Conclusion

When it comes to using background image and color together it’s a very common web practice but as the web technology is evolving you should know the advance techniques alongside the basic ones. We have discussed most of the techniques here from very basic to advance level.

So it comes down to your preference when to use which technique. But always remember don’t limit yourself with these techniques only keep playing and exploring you will discover your very own technique.

I hope you liked this article and find it useful. Thank you for reading!

Do you know other techniques for using a background with image and color together in CSS? If you do, make sure you share them in the comments below!

Here are some of my favorite website building tools

Thanks for reading the article I hope it was helpful for you. Here are some of my favorite tools that I always use and recommend for website building I hope they will be helpful for you. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission.

Web Hosting: For a new website I like GreenGeeks, I’m using it on this site for over a year now without any problems. They have very affordable plans for beginners and the support is reliable. Their simple setup will get you off and running in no time.

Learn Front End Development: If you want to learn front-end development I recommend Pluralsight, learn from industry professionals. You can try the no-risk 10 days free trial and check the content.

Advertising Network: If you want to increase your ads revenue with Adsense then try using Ezoic, unlike most ad networks it doesn’t need any minimum traffic to get started. It is completely free to use.

Set Background Color Opacity Using Alpha Channel Color Notations

We can use the following CSS3 alpha channel color functional notations to set the background color to a lower opacity:

Using the RGBA (Red-Green-Blue-Alpha) Model:

Syntax:

background-color: rgba(red, green, blue, alpha);

Where the values of each color in RGB can be an integer between 0-255 or a percentage value from 0-100%, and the value of Alpha can be a number between 0-1.

Examples:

rgba(0, 0, 255, 0)      /* transparent */
rgba(0, 0, 255, 0.5)    /* 50% opaque blue */
rgba(0, 0, 255, 1)      /* fully opaque blue */

Syntax:

background-color: hsla(hue, saturation, lightness, alpha);

Where the possible values of the HSLA color notation are:

• Hue: specified in degrees (imagine a color wheel) where:
  • 0° – red
  • 60° – yellow
  • 120° – green
  • 180° – turquoise
  • 240° – blue
  • 300° – pink
  • 360° – red
• Saturation: specified in percentage where 0% is completely desaturated (or gray) and 100% is fully saturated (or full color).
• Lightness: specified in percentage where 0% is completely dark (or black) and 100% is completely light (or white).
• Alpha: a number between 0-1 where 0 is fully transparent and 1 is fully opaque.

Examples:

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* 50% opaque blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Свойство background-position

Также вы можете указать браузеру место, в котором будет расположено изображение. Для этого есть свойство со значениями в виде ключевых слов (left, center, right — по горизонтали, или координате по X, top, center, bottom — для вертикали, или координате по Y), в виде единиц измерения, обычно используемых в css (px, em, ex, pt), или в процентах (%). Но, если вы задаете свойство в %, то должны понимать, что проценты берутся от ширины или высоты того элемента, для которого указывается это свойство. Кроме того, значения в виде ключевых слов и в виде процентов имеют  следующую аналогию:

CSS

left top — 0% 0%;
left center — 0% 50%;
left bottom — 0% 100%;
right top — 100% 0%;
right center — 100% 50%;
right bottom -100% 100%;
center center — 50% 50%;

1 2 3 4 5 6 7

lefttop-0%0%; leftcenter-0%50%; leftbottom-0%100%; righttop-100%0%; rightcenter-100%50%; rightbottom-100%100%; centercenter-50%50%;

Кстати, по умолчанию любая фоновая картинка «прилепится» к левому верхнему углу, т.е. начнется с точки начала координат браузера (для body) или элемента. Если же вы зададите только одно значение, то второе будет интерпретировано, как . При указании одного значения в px, %, em и т.п., а не в виде ключевого слова, вы получите смещение по горизонтали на указанное количество единиц, а по вертикали изображение будет центрировано (применится значение ).

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

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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Добавление фонового изображения

Кроме цвета фона элемента мы можем также добавить к нему фоновое изображение. Такие изображения работают аналогично цвету фона, однако предлагают несколько дополнительных свойств для уточнения. Как и прежде, мы можем использовать свойство background с сокращённым значением или свойство background-image напрямую. Независимо от применяемого свойства они требуют указать источник изображения с помощью функции url().

Значение функции url() будет адресом фоновой картинки и к нему применяются знакомые правила для создания пути гиперссылки. Следите за разными папками и не забудьте показать, где именно находится изображение. Путь помещается внутри скобок и кавычек.

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

background-repeat

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

Свойство background-repeat принимает четыре разных значения: repeat, repeat-x, repeat-y и no-repeat. repeat является значением по умолчанию и повторяет фоновое изображение по вертикали и по горизонтали.

Значение repeat-x повторяет фоновое изображение по горизонтали, в то время как значение repeat-y повторяет его по вертикали. Наконец, значение no-repeat говорит браузеру отобразить картинку один раз, то есть не повторять её вообще.

background-position

По умолчанию, фоновая картинка располагается в левом верхнем углу элемента. Тем не менее, с помощью свойства background-position мы можем контролировать, где именно изображение размещается относительно этого угла.

Свойство background-position требует два значения: горизонтальное смещение (первое значение) и вертикальное смещение (второе значение). Если указано только одно значение, то оно применяется для горизонтального смещения, а вертикальное по умолчанию задаётся как 50%.

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

Чтобы установить значение background-position мы можем использовать ключевые слова top, right, bottom и left, пиксели, проценты или любую единицу размера. Ключевые слова и проценты работают очень похоже. Значение left top идентично процентному значению 0 0, которое располагает изображение в левом верхнем углу элемента. Значение right bottom идентично процентной записи 100% 100% и будет позиционировать изображение в правом нижнем углу элемента.

Рис. 7.01. Фоновые изображения позиционируются от левого верхнего угла элемента

Одним из преимуществ процентов по сравнению с ключевыми словами является возможность центрирования фонового изображения с помощью значения 50%. Для размещения фонового изображения в верхней части элемента, мы можем использовать значение 50% 0. Применение пикселей в качестве значения background-position также распространено, так как пиксели дают нам точный контроль над положением фона.

Значения background

Свойства background-color, background-image, background-position и background-repeat могут выступать значением для единичного свойства background. Порядок этих свойств в background может варьироваться, но обычно он такой: background-color, background-image, background-position, а затем background-repeat.

Пример фонового изображения

В следующем примере мы будем использовать свойство background, которое включает значения background-color, background-image, background-position и background-repeat.

Пожалуйста, обратите внимание, что в background-position содержится относительное и абсолютное значение. Первое значение, 20 пикселей — это горизонтальная величина, позиционирование background-image на 20 пикселей от левого края элемента

Второе значение, 50% — это вертикальная величина, которая центрирует фоновое изображение по вертикали.

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

HTML

CSS

Несколько фоновых изображений

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

body
{
background: url("sun.png") fixed no-repeat top right, url("snow.png") fixed;
}

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

Несколько фоновых изображений

Несколько фоновых изображений работают во всех браузерах кроме устаревших версий Internet Explorer, который распознает эту функцию, только начиная с версии 9 (IE9).

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

Parameter definition

In the following sections, the options for defining single and multiple colors are defined in detail.

> Color:

The simplest way to define a background color using CSS is to define a object. See the documentation for the object for more information on the available formats.

-fx-background-color: red;

> Linear gradient

> Radial gradient

> Image Pattern

An image pattern can be defined using either the image-pattern() function, or the repeating-image-pattern() convenience function. Here’s an example using the image-pattern() function.

2. Multiple Background Colors

The JavaFX CSS property also accepts multiple objects in a comma-separated list. This can be useful in creating more atmospheric backgrounds for specific purposes.

> Multiple layers with transparency:

In cases where you don’t want to expose multiple backgrounds using background insets, it’s common to incorporate transparency into each layer, blending the backgrounds and giving users a richer experience. Transparency can be applied to both image patterns and fills (images must themselves have transparency, it cannot be set in JavaFX using CSS).

Code:

Layers (in the order they’re specified):

Linear gradient:

Dramatic night background

Star effect:

White stars, transparent bg

Vignette:

Radial gradient vignette

Result:

> Multi-layer depth effect

Layered background fills can also be used to give the impression of an object with a raised profile. This is used throughout JavaFX to create controls which appear to be elevated relative to the background.

Code:

Layers (in the order they’re specified):

Bottom highlight:

Insets: 0 0 -1 0Type: Solid color1px strip (bottom)

Grey border:

Insets: 0Type: Solid colorStrong grey border

Border highlight:

Insets: 1Type: Gradient1px lighter border.

Main Fill:

Insets: 2Type: GradientMain button color

Result:

How it works:

When specifying multiple backgrounds, there are a few things to bear in mind:

• Backgrounds will by default overwrite each other unless transparency, insets or radii are used
• Backgrounds are rendered in the order in which they’re specified (i.e. the bottom background is specified first).

Behaviour

Both rendering order and background’s attached properties are an important part of rendering multiple backgrounds:

1. Rendering Order:

When multiple background colors are defined, they will be rendered in the order that they are specified, meaning the first object will be rendered at the back, and the last object will be rendered at the front.

2. Combining with insets and radii:

It is also possible to define multiple backgrounds in combination with the and CSS properties. This will produce layered backgrounds that may not completely overlap. In fact, this is how the object background in JavaFX is defined.

Background fills, radii and insets are all defined in comma-separated lists. Every fill is therefore ‘matched’ with its corresponding radius and inset. If sufficient radii and insets aren’t defined, they default to zero

Check out the entries for and for their proper definition and use.

Values

The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.

 can have the following values:

Value	Description
	A color defined as a hexidecimal, RGB, HSB, looked-up or named color object
	A linear gradient defined using the linear-gradient() function
	A radial gradient defined using the radial-gradient() function
	An image pattern defined using the image-pattern() function, or the repeating-image-pattern() convenience function.

Свойство background-clip

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

Варианты значений свойства:

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

CSS

background-clip: padding-box | border-box (по умолчанию) | content-box | text

1	background-clippadding-box|border-box(поумолчанию)|content-box|text

Первые 3 значения свойства background-clip подобны по внешнему виду работе свойства background-origin. А последнее значение —  text позволяет сделать , если пользоваться терминами Adobe Photoshop, т.е. как бы «вырезать» текст из фоновой картинки. Для этого необходимо к остальным стилям добавить свойство color: transparent. Кроме того, для браузеров на основе Chrome (Opera, Safari, Yandex-браузер), необходимо еще добавить свойство с вендорным префиксом .

Cdjqcndj background-clip: text;

CSS

.my-block {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

1 2 3 4 5

.my-block { background-cliptext; -webkit-background-cliptext; colortransparent; }

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

Обратите внимание, что использование свойства background-attachment: fixed не влияет на свойство

CSS Syntax

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Note: If one of the properties in the shorthand declaration is the bg-size property,
you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px;
will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

Note: If using multiple background-image sources but also
want a background-color, the background-color parameter needs to be last in the
list.

Example

We will discuss the background-color property below, exploring examples of how to use this property in CSS.

Using Hexadecimal

Let’s look at a CSS background-color example where we have provided a hexadecimal value for the color.

In this CSS background-color example, we have provided a hexadecimal value of #FFFFFF which would display the background color as white for the <div> tag.

Using RGB

We can also provide the background-color value using rgb.

In this CSS background-color example, rgb(0,0,0) would also display background color as white for the <div> tag.

Using Color Name

Let’s look at a CSS background-color example where we have provided the value as a named color.

In this CSS background-color example, we have provided the name «white» which would also set the background color of the <div> to white.

Свойство background-attachment

Вы, скорее всего, видели, что, как правило, фон двигается за элементом. За это отвечает свойство background-attachment: scroll. Но его можно изменить на значение fixed, и тогда фон «зафиксируется», а контент, т.е. содержимое вашей странички будет прокручиваться как бы поверх фона.

Еще свойство имеет значение — для элементов с полосой прокрутки фон в них будет прокручиваться локально.

CSS

background-attachment: scroll || fixed || local || inherit;

1	background-attachmentscroll||fixed||local||inherit;

Обратите внимание на значение inherit — оно характерно для большинства свойств css и обозначает, что данное свойство наследуется от родительского элемента. Не поддерживается Internet Explorer версии 7

В примере ниже можно посмотреть на 2 значения свойства и . Его имеет смысл открыть в новой вкладке:

В примере ниже вы можете посмотреть на разницу между значением и lдля элементов с внутренней прокруткой (для них обычно указывают свойство или ):