Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

css

opacity

Can I assign the opacity property to the background property of a div only and not to the text on it?

I've tried:

background: #CCC; opacity: 0.6;

but this doesn't change the opacity.

like image 825
Jay Avatar asked Feb 27 '11 18:02

Jay

People also ask

How do I make the background opacity but not text in CSS?

The percentage of opacity is calculated as Opacity% = Opacity * 100 To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.

How do I change the background opacity without affecting text?

Simply use rgba to define your background color and specify opacity with it at the same time by adjusting the last value, for alpha, in your rgba code. For scaling, bringing the value closer to 0 increases transparency. To simplify your HTML, you don't even need the parent div around your block of text to do this.

How do I set opacity for background only?

Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.

How do you put background color opacity in CSS?

To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).

1 Answers

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.

like image 81
Tim Cooper Avatar answered Sep 30 '22 03:09

Tim Cooper
Sign in to Comment

Related questions

Check if an element contains a class in JavaScript?
How to remove close button on the jQuery UI dialog?
Remove border from IFrame
Hiding the scroll bar on an HTML page
Can the :not() pseudo-class have multiple arguments?
How to apply !important using .css()?
Why em instead of px?
Space between two rows in a table?
What does the "+" (plus sign) CSS selector mean?
Can a CSS class inherit one or more other classes?
Is it possible to include one CSS file in another?
How to center a "position: absolute" element
Flexbox: center horizontally and vertically
How do I wrap text in a pre tag?
How to Right-align flex item?
CSS 100% height with padding/margin
How can I position my div at the bottom of its container?
Changing the color of an hr element
What methods of ‘clearfix’ can I use?
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!