div { background-color: rgb(255,0,0); opacity: 1; }
div { background-color: rgba(255,0,0,1); }
What is the difference between the above two?
Opacity sets the opacity value for an element and all of its children;
While RGBA sets the opacity value only for a single declaration.
This is well explained here. http://www.css3.info/introduction-opacity-rgba/
Opacity : The opacity property sets the opacity level for an element.(Setting opacity for an elements makes the whole element transparent including its content.)
Defining opacity:
element{opacity:0.5} //makes the element and it's content 50% transparent
The opacity-level describes the transparency-level, where 1 is not
transparant at all, 0.5 is 50% see-through, and 0 is completely
transparent.
Alpha Channel RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.
Background : rgba (Red,Green,Blue,Opacity) (Setting rgba of an element only makes the element background transparent leaving its content as it is.)
Defining Background rgba: background:
element{
background:rgba(40, 41, 42, 0.5);
}
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
To convert a hex value of color to rgb: Here
Further Info:
RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
when you use alpha, you are only setting opacity for that specific property of the div. So only the background will be slightly transparent if you set the alpha value to say .5
However, when you set opacity to .5, the ENTIRE div and everything inside it will stay slightly transparent, no matter what alpha values elements within the div have.
Within a div with opacity set to .5, an element will be at max ".5" opaque (when its alpha value is set to 1). If its alpha value is set to .5, the transparent affect will compound and it will actually be something like ".25" transparent. Not sure about the specific numbers.
Most answers are good. Let me add a bit:
Alpha channel : specified as a value of a CSS attribute. Like as in a part of RGB color. Many a times used with background-color CSS attribute.
Opacity : a CSS attribute of an element. Impacts the entire element, and it's contents.
This example from MDN (among the reliable sources for web dev) here beautifully explains this and makes this really clear.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Make_box_transparent
Related
I have following CSS code:
div {
background: url('image-url'), linear-gradient(gradient), url('image-url-2');
background-blend-mode: blend-mode-1, blend-mode-2;
}
The position of gradients or url backgrounds can change. I think that should have have any effect on blending order. My question is how are these modes applied to calculate final value?
Do browsers first apply blend-mode-1 on url('image-url') and linear-gradient(gradient) and later apply blend-mode-2 on the result of first and url('image-url-2') or is it the other way around?
Am I using the correct number of background-blend-modes or do I need to specify 3 of them?
The stacking order of the background-images is the key factor here.
Your background images are stacked in the reverse order, the first in the list being the uppermost in the rendering stack.
The blendmodes are applied as any comma separated property applied on backgrounds, the first one to the first image, the second one to the second, and so on.
in your example
div {
background: url('image-url'), linear-gradient(gradient), url('image-url-2');
background-blend-mode: blend-mode-1, blend-mode-2;
}
url2 is at the bottom.
Above it, you have the gradient, with blend-mode-2 applied.
And above it, the image-url with blend-mode-1.
You could set a third background-blend-mode. In this case, it would aply to the blend between image-url-2 and background-color (That you don't set in your example, but that could be set)
Blending takes place from back to front.
In other words, each element (image or gradient) is blended with the result of blending all underlying elements.
This is important, because many blend modes are not associative.
An example is difference.
Suppose you have 3 elements:
A = solid color #fff (front element; closest to user)
B = solid color #666
C = solid color #666 (back element; farthest from user)
What will happen is this:
Blending B with C; the result is black (#666 - #666 = #000).
Blending A with the result from the previous step (black); the result is white (#fff - #000 = #fff).
If blending would have started from the front element, then the result would have been 'dark charcoal':
(#fff - #666) - #666 = #333.
Live demo:
.p1 { /* |#fff - |#666 - #666|| = #fff */
background-image:
linear-gradient(#fff, #fff), /* front element */
linear-gradient(#666, #666),
linear-gradient(#666, #666); /* back element */
background-blend-mode: difference, difference, normal;
}
.p2 { /* |#666 - |#666 - #fff|| = #333 */
background-image:
linear-gradient(#666, #666), /* front element */
linear-gradient(#666, #666),
linear-gradient(#fff, #fff); /* back element */
background-blend-mode: difference, difference, normal;
}
<p class="p1">White</p>
<p class="p2">Dark charcoal</p>
Here's what the specs had to say about it.
From Compositing and Blending Level 2:
Conceptually, the colors in the source element are blended in place with the backdrop.
and:
The backdrop is the content behind the element and is what the element is composited with. This means that the backdrop is the result of compositing all previous elements.
Still a bit vague; composition and blending are related, but not the same.
But the logical interpretation is:
blending should work from back to front.
I think all major browser vendors have followed that interpretation.
It makes sense to specify the third blend mode.
As already pointed out by vals, a third blend mode can be specified to blend the third element with the background-color.
This blend step will always come first, since background color is always behind any of the elements specified in background-image.
You could say background-color acts like a fourth element.
However, the absence of the third blend mode does not mean 'do not blend'!
From Compositing and Blending Level 2:
If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.
In other words, background-blend-mode: <bm1>, <bm2> is automatically expanded into:
background-blend-mode: <bm1>, <bm2>, <bm1>
I won't deny this third blend mode has no effect, but that is for an entirely different reason:
the absence of background-color.
From the same document:
Everything in CSS that creates a stacking context must be considered an ‘isolated’ group.
and:
In an isolated group, the initial backdrop shall be black and fully transparent.
and:
Cs = (1 - αb) x Cs + αb x B(Cb, Cs)
A fully transparent background (αb = 0) causes the result of blending to be discarded, and to keep the color of the source element (here: the third element).
This is what happens when no background color is specified.
There is always the possibility that somebody will add a background color later.
To avoid unexpected color changes, I would recommend to always specify an explicit blend mode for the element in the back.
If you don't want to blend with the background color (if any), then just say so, by adding normal to the end of the list of blend modes.
It may prevent nasty surprises in the future, especially when <bm1> (the front blend mode, which will automatically occupy the empty spot in the back) is kind of an exotic blend.
Is there any major advantage to use:
background-color: rgba(0,0,0,0);
instead of:
background-color: transparent;
?
Behaviour is exactly the same, but transparent is compatible also with IE8.
RGBA is more advanced (but lacks IE8 support) and allows you to quickly modify it, in case you would like an "almost transparent" color, without need to completely change attribute.
For example, it could be very quick to set
background-color: rgba(0,0,0,0.1);
Due to default behaviour of browsers that ignored unrecognized properties, is possible to combine them in order to use new one in newer browsers, but leave a fallback for older ones, simply typing both of them:
background-color: transparent;
background-color: rgba(0,0,0,0);
Or, more useful, in case of alreasy cited almost transparent backgrounds, you can write:
background-color: transparent;
background-color: rgba(0,0,0,0.1);
New browsers will set rgba(0,0,0,0.1) as background, overriding previous transparent declaration, but IE8 will set transparent as background, because it will ignore unrecognized rgba() value, so a slightly different result but in according to Graceful Degradation principle.
To Note: background_color: rgba(0,0,0,0.0); would be more accurate but the same. As stated background_color: transparent; would be supported in older browsers.
Using the background_color is not the issue as it is used universally in both indicators.
The issue of question is in the assignment of transparent -vs- rgba.
transparent - obviously sets the background to a transparent background with no color option; the other choice is a specified color assingment in hex or other accepted color values such as blue rgb(x,x,x) rgba(x,x,x,x) #xxxxxx hsl(x,x,x) hsla(x,x,x,x) etc.
rgba(x,x,x,x) however is and is not a horse of a different color as it is more extensive and needs to be broken down to explain. Firstly the difference is that you are assigning a color and setting the transparency,
The "rgb" portion of the setting stands for red green blue representing the first 3 zero settings (0,0,255,X) and each 0 accepts values from 0 to 255. Playing with these three values in combination mixes the color settings to produce a single color.
The "a" in (rgba) and its zero setting (x,x,x,0) is the ALPHA channel that sets the opacity/transparency of the first three combined colors (x,x,x,?). Of special note this last zero value(x,x,x,0) accepts range of values from 0.0 to 1.0 . A 0.0 setting is fully transparent while 1.0 is solid. So, using the setting rgba(x,x,x,0.5) would produce a given color at half transparency.
I've found a scenario where you can spot a difference between the two.
I have a case where I want to place a red diagonal line as a strikethrough a div which needs the background to use transparent and not rgba(0, 0, 0, 0).
This is my code:
<div className="relative">
<p>Text here</p>
<div style={{background: "linear-gradient(to left top, transparent 45%, #d10813 48.5%, #d10813 51.5%, transparent 55%)"}} className="absolute top-0 w-full h-full"></div>
</div>
If you switch transparent 45% to rgba(0, 0, 0, 0.45) you can see that it doesn't work anymore.
So, in a few words transparent with opacity is not the same as black with opacity obviously.
(The code is in react and the classnames are from tailwindcss)
you want a transparent background in React Native, apply this piece of code
backgroundColor: 'rgba(1,1,1,0.1)'
Inspired by this question, I realized I haven't been able to find a clear answer to what the bit depth of the a part of rgba and hsla in CSS3 colors actually is. I've hunted through various W3C documentation, but aside from specifying that alpha is represented as a float range 0.0% - 100.0%, and the definition for the bit depth of the alpha channel in PNGs, I don't really have a clear picture (haha) of what the limits of the alpha channel in CSS3 actually are. Can someone find something more normative?
Refer to Mozilla Developer Docs on opacity in rgba aka alpha aka "a" in rgba:
alpha docs on mozilla developer org
opacity
The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
Syntax
opacity: 0.9
opacity: 90%
/* Global values */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;
Values :
a (alpha - value in Number) in the range 0.0 to 1.0, inclusive, or
a (alpha - value in % ) in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel).
Any value outside the interval, though valid, is clamped to the nearest limit in the range.
How does twitter implement this kind of transparency ?
I tried adding opacity to my code but every children element is being affected. what I aim is somewhat like in the image above. how would I do that? is opacity the right css rule for that?
Try using RGBa instead of opacity to achieve this effect. The opacity property forces all child elements to also become transparent, and there are not many simple ways to work around that. RGBa makes the element transparent but all the child elements remain unchanged.
Example:
div {
background: rgba(10, 10, 10, 0.5);
}
The first three numbers in RGBa represent the color in RGB values; the fourth represents a transparency, and should be between 0.0 and 1.0 (similar to the opacity property).
JS Fiddle Example
RGB Color Chart
background-color: rgba(255,255,255,.5);
http://www.css3.info/preview/rgba/
CSS opacity will always work that way. You can always use semi-transparent png as a background.
I tried with text just with: opacity:3;filter:alpha(opacity=300); and it works, but not with images,
any alternative?
If you are trying to make the images darker you cannot do that with opacity higher than 100%. 100% opacity is the most visible, the opacity scale (like in photo/video editing) is from 0 (completely transparent) to 100 (full opacity).
You can however give your image a filter property which will overlay on top of the image. That filter property can do a lot but in this case you would benefit most from the brightness setting of the filter property. 100% brightness will show your image in it's original form, whereas the lower the percent of the brightness the darker the filter will get and thus the darker your image.
It would look something like this:
.slide-img{
width: 100%;
height: 20%;
filter: brightness(50%);
}
Even it it's possible to set opacity values above 100%, there is no benefit to doing so. Once something is 100% opaque it cannot visibly become any more opaque than that.
What is it that you are trying to accomplish by setting the opacity above 100%? There may be some other property that will give you the desired effect.
Image Transparency
I don't think opacity=300 makes any sense; try opacity=30?
Likewise where you are saying opacity=3, you should try opacity=0.3