CSS Backgrounds, CSS background color, CSS opacity

web development

Monday 29 March 2021

Hacker

web development

CSS Backgrounds

The CSS background properties are used to add background effects for elements.The background-color CSS property sets the background color of an element.

CSS Background color

In the CSS background chapters, you will learn about the following CSS background properties:

background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)

CSS background-color

The CSS background-color property is specifying the background color of an element.

Example

div {
  background: green;
}

Try it Yourself »

In the CSS, a color is defined by:

a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Most Important : CSS Color Values for a complete list of possible color values.

Other Elements

You can set the background color for any HTML elements:

Example

h1 {
  background: orange;
}

Try it Yourself »

Opacity / Transparency

The opacity property defines the opacity/transparency of an element. Opacity can take a value from 0.0 - 1.0. The lower value, the more transparent:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Example

div {
  background: orange; opacity: 0.3;
}

Try it Yourself »

Note: When we use the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can made the text inside a fully transparent element hard to read.

Transparency using RGBA

If you doesn't want to apply opacity to CSS child elements, like example above, use RGBA color values. The following example sets the opacity is used for the background color, not the text:

Example

div {
  background: rgba(255, 204, 0, 0.3)
}

Try it Yourself »

Output:

100% opacity

60% opacity

30% opacity

10% opacity

You can learn from our CSS Colors Chapter, that how you can use RGB as a color value. In addition to RGB, you can use the RGB color value with an alpha channel (RGBA) - which is specify the opacity for a Background color.

An RGBA color value is defined with: rgba(red, green, blue, alpha). The alpha parameter is a float number between 0.0 (fully transparent) to 1.0 (fully opaque).

Note : You can learn Complete about RGBA Colors in our CSS Colors Tutorials.

❮❮ Previous Next ❯❯

Rahasyacommunity.