The opacity property in CSS specifies how transparent an element is.
Basic use:
div {
opacity: 0.5;
}Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the “alpha” channel). When an element has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).
IE Compatibility
If you want opacity to work in all versions of IE, the order should be as follows:
.opaque {
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50); // IE 5-7
/* Modern Browsers */
opacity: 0.5;
}If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.
Note on Stacking Contexts
If an element with opacity and a value less than 1 is positioned, the z-index property applies as described in CSS2.1, except that the auto value is treated as 0 since a new stacking context is always created.
Opacity can be used as an alternative to the visibility property: visibility: hidden; is just like opacity: 0;.
Related Properties
Other Resources
- W3C CSS Color Module Level 3 Recommendation
- W3C CSS3 Color Module Level 3 Editors Draft
- MDN Docs
- Web Platform Docs
- Caniuse.com
- Toggle Visibility When Hiding Elements
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 24+ | 5.1+ | 19+ | 12.1+ | 9+ | 2.1+ | 3.2+ |
how can u make boxes with transparent border of 10px..??
can u please help me out..
i am searching for the solution..
if possible please send me a demo code..or complete example..
Thank you in advance
You could use rgba() as color of border:
border: 10px solid rgba(255, 0, 0, 0.4);You can use padding
CSS
.box {
padding:10px;
}
HTML
Has anyone noticed this new thing where if you define a background color like this; background-color: #000000b3; it adds opacity to it. This seems fairly new to me been trying to find documentation on it all morning. If anyone has more info, let me know (Only tried it in Firefox, no idea if it works in other browsers)
Hi Chris, you’re mixing CSS and JS style comments in the first code block on this page.
// foovs/* foo */– this might be an issue for anyone copying and pasting your example directly into their work.Just now realised you might have been using Sass for the inline
// foocomments. Even so, it would be good to clarify to avoid people who aren’t using a pre-processor from using non-valid comments in vanilla CSS.I want only to reduce the box background opacity and opacity of text in box Does not change! please help me…
sorry if i have misspelled , i cant speak english very well! :(
use RGB instead of HEX. A white background with 50% opacity is:
background: rgba(255, 255, 255, 0.5);
Hassan, it sounds like you’re asking how to have opacity on a box while having text show inside the box that does not have opacity on it.
The opacity property will affect anything inside of it. So the technique I prefer is to:
1) wrap the box (that needs opacity) within a container and give it position:relative
2) give the box its opacity property (obviously)
3) put the text in its own container as an adjacent sibling to the opaque box, give it position:absolute, set the top & left properties however you want to set its placement
Gilbrizzle’s info is good as it relates to the topic of this article, which is the “opacity” attribute, but what Hassan is asking requires a simpler solution: don’t use “opacity”, but rather use RGB + “alpha” instead.
“opacity” attribute will apply to all of the attributes of the selector where it’s defined.
RGBA, however, only applies to the specific attribute it’s applied to and leaves the other attributes of the selector alone.
For example:
Doing this gives a 40% level of transparency to the grey background, but the text in front of it remains black.
There are reasons to use either solution, so it’s a matter of which is best for what you’re trying to do. I think this simpler one may be you were looking for though.
Works even if the parent element has a “visibility : hidden”.
is there a way to have a box transparent, but the text in it, not?
Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent.
A way to do that is like this: make your own picture with that text into it and color the background exactly with your box transparent, but instead a div you will be have an image
Yeah; set a background with an alpha channel/value. Semi-transparent black would be:
background-colour: rgba(0,0,0,0.5);background-color: rgba([0-255], [0-255], [0-255], [0.0-1.0]@damien, wrap the box in a container with position:relative on it, put opacity on the child box, put your text element as a sibling to the box with opacity and use position:absolute to place it over its sibling.
sir , i want to find out opacity in javascript and alert the message
also can set class=”%4″ to change Background opacity to 0.4 by colorclass script.
refer to this website: http://colorclass.ir/
Please find the solution for
CSS opacity only to background color not the text on it?
http://ankithackingtips.blogspot.com/2016/04/css-opacity-only-to-background-color.html
gfghf h
OH, it’s a base CSS lesson
Earch
OH it’s base CSS leson
How to change background image’s opacity?
I have a problem that I cannot seem to get my head around, …. I am new to CSS and I am trying to implement opacity to deveral images on the page. Using this code:
I can make my images opaque until I hover over them, …. but, how do I apply this only to specific images on the page?
Hey Andrew,
You need to create a class and call it in only on those images you wish to have the transparency.
CSS:
HTML:
Hi,
I have a page with a background image and a lot of CSS elements that themselves have colour backgrounds.
I’ve added
body {
opacity: 0.6;
Which is ideal for the transparency of the elements, but all the text is also transparent too.
can you point me in the right direction. Still working on the CSS learning curve.
Hey Colin! Yeah, that’s an unfortunate side effect of using opacity on an element that has other elements inside of it: everything becomes opaque.
You might try separating the background image into its own element outside of the other elements and try using absolute positioning to line it up with everything else. That way, it will be isolated so the opacity affects it alone.
I need to overwrite a background-color which they already use !Important. so I am thinking to put the background opacity to 0. I can’t use RGBA(0,0,0,0). Is there any other way to do it in CSS?
visibility: hidden is not the same like opacity: 0
example use both on a button, and with opacity: 0 you can still click the button but with visibility: hidden you cant.
how to make a strong text over a transparent div. i don’t want to use rgba. i want to achieve it using opacity. tell me a way
on this site https://www.w3.org/TR/css-color-3/#transparency , in the property definition of ‘transparency’, there is the following text:
But what exactly does it mean ? thanks !
I was mistaken :
<<…in the property definition of ‘transparency’, there is …>>
it is of course “opacity”