using CSS, i'm trying to blend a background-image with a color.
The image is a PNG with translucent parts though.
How can I apply a blend-mode only to the actually visible parts, so if the PNG has a hole, the elements lying behind can be seen unobstructed there?
Codes like:
background-image: url("Scales/Scale1.png");
background-color: rgba(0, 0, 255, 1);
background-blend-mode: luminosity;
result in an opaque color blending with the image ontop. Fully translucent pixels of the image contain the background-color instead of being translucent on the result.
Anyone having an idea how to solve this?
Thanks in advance :)
Only with filter
filter: hue-rotate(90deg);
and sepia(NN%) probably. No other options and only in browsers that support it.
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)'
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 have got a table with white font on a blue background as you can see its not the easiest to read. is there any font/solution to make it a bit more eye friendly with css. im using ie6
(the info displayed is made up)
edit: I cant change the background image and colour because theyre the companies colours
You could give the tablecells a solid black background, and then make it slightly transparent.
td {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}
(css is from http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ , look there if you want to make it compatible with MSIE)
Personally, I think it looks fine, but to others it might be harder to read. What I'd do is give it a flat, untextured background, like you have in the image on the right hand column. You could possibly make the contrast a bit better by darkening the background. The only small issue I can find with your image is the textured background to the left.
My idea is that a PNG overlaying some text, with transparency ranging from 0% to 100%, all colored in the same color as the CSS background, would fade out the text underlying it.
Turns out the transparent PNG is visible also in the areas where it's supposed to be transparent. Also, the colors of the PNG and the CSS are not the same - even though I create them with the same hex-values.
An image is included. I have tried creating the resource in Illustrator, Photoshop and Fireworks. I have tried removing the gamma-information (gAMA) with pngcrush, PNGSquash and ImageMagick. The problem is the same on Firefox as in Safari.
If anyone knows how to solve this -- or if it's even possible -- I'd love to hear it! Thank you in advance.
I can't immediately solve the issue you're experiencing, but I can offer an alternative text-fading solution, if that's of any use?
.text-to-fade {color: rgba(255,255,255,0.0) /* red: 255, green: 255, blue: 255, alpha: 0 */
}
the value of 0.0 at the end is the alpha value, and can range from 0 to 1, with 0 being opaque and 1 being transparent. rgba has problems on browsers other than Firefox insofar as I've experimented.
perhaps
.text-to-fade {opacity: 0.5; /* for most browsers */
filter: alpha(opacity=50); /* for IE */
}
The reason it appears to be a different color is because it's transparent, not because the colors are actually different. To demonstrate this, open an image editor that supports layers. Create a white bottom layer and a black top layer. Set the opacity of the black layer to 50% and merge the layers down. Use a color picker to check the color. It's going to be #808080, not black.
The reason it's not fading is because that color is additive. Say your text is #808080 too: in places where there's text, you have #808080 overlaying #808080--and that ends up being something like #424242 rather than canceling out as you want. There's really not a great way to do what you're trying to do inside a web browser in only one step.
One thing to do would be to make the text invisible (visibility: hidden;) with javascript. Another option would be to use relative or absolute positioning and set up the z-indices so things look something like this:
3: TRANSPARENT-GREY
2: button/any other objects
1: OPAQUE-GREY
0: text
That will block out the text and leave anything else partially visible.