How to Change The Background Colour's Opacity in CSS

CSS opacity only to background color, not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)
R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
RGBa example
background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

How to change the background colour's opacity in CSS

background: rgba(0,0,0,.5);

you can use rgba for opacity, will only work in ie9+ and better browsers

How do you change the background opacity in CSS?

I can't see how to change the background opacity without using rgba().

As pointed out in the comments, you could always use a CSS preprocessor to handle this.

For instance, LESS's fade() color function will take a color object and a percentage and convert the value to a usable rgba color:

p { background-color: fade(red, 50%); }

The above would compile to:

p { background-color: rgba(255, 0, 0, 0.5); }

I'd LIKE to use CSS like shown example #5, but to have it WORK like example #4.

Possible workaround:

Since you currently can't convert colors using CSS, one workaround would be to set the background color on a :before pseudo element. In doing so, you can still leverage the opacity property in order to adjust the opacity of the entire element without affecting the other element(s) and content.

.background-opacity {  position: relative;}.background-opacity:before {  content: '';  background-color: red;  opacity: 0.5;  position: absolute;  top: 0; left: 0;  bottom: 0; right: 0;  z-index: -1;}

<p class="background-opacity">'background-color: red' / 'opacity: 0.5' on the ':before' pseduo element.<p>

Css Background Color Opacity

You could use an rgba colour for the background. rgba has an alpha channel that dictates the opacity of the colour layer. This would be the equivalent of the background-color-opacity that you mention.

div {  padding: 15px;  text-align: center;}div:nth-child(1) {  background: red;}
div:nth-child(2) {  background: green;}
div:nth-child(3) {  background: blue;}
button {  background: transparent;  border: 1px solid white;  color: white;  padding: 15px 30px;  transition: all .2s ease;}
button:hover {  background: rgba(0,0,0,0.3);}

<div>  <button type="button">    Button  </button></div>
<div>  <button type="button">    Button  </button></div>
<div>  <button type="button">    Button  </button></div>

CSS Background Opacity

Children inherit opacity. It'd be weird and inconvenient if they didn't.

You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color.

Example, 50% faded black background:

<div style="background-color:rgba(0, 0, 0, 0.5);">   <div>      Text added.   </div></div>

Separating background-color and opacity?

It is currently not possible to specify partial color components and have the rest of the values inherit or cascade in CSS.

If you need to specify a color with an alpha value, you'll have to supply its RGB or HSL values together with the alpha, as the only color values that allow you to specify an alpha component are rgba() and hsla(). You can't specify the alpha independently of the other color components.

See the CSS3 Color Module for details.

How to make opacity only for background?

Hi if your background does not has any Images.
Then easily you can apply opacity on it background.
Here is some example you can use ->

background-color: #00ff0055;
/*-- The value after six digit is your alpha color or opacity of background.--*/
background-color: #0f05; /*-- Same as previous one.--*/
background-color: rgba(0,255,0,.5); /*-- a extend for alpha color--*/

Hope this help you.

CSS: background color with opacity on background image

try this code

.background {    background:url('http://placehold.it/100x100');    position: relative;    height: 100px;  width: 100px;}
.layer {    background-color: rgba(75, 86, 160, 0.7);    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}

<div class="background">    <div class="layer">    </div></div>