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.
Related
Is it possible to keep the background dark while adding opacity? I'm trying to create an input that looks like the image added. Every time I set the background to #000 and add opacity, the background starts to turn gray instead of staying black and becoming transparent.
Edit:
For everyone telling me to use:
background: rgba(0,0,0, 0.5);
This is the result (doesn't work)
Edit 2:
Here is a fiddle - http://jsfiddle.net/n7aob2yd/1/
The last value 0.5 is the alpha channel.
.selector {
background-color: rgba(0, 0, 0, 0.5);
}
What you're doing is correct. You see gray because the background is white. Try using a background like the one in your screenshot and you'll see that it works. And don't use opacity because it will apply it to everything, including the text. Now, try using a background color that matches the background image, in this case, a dark blue. Maybe that's what's missing.
I've seen a neat effect at the end of the describing text here where the last line of the text is gradually increasingly transparent and i'm curious on how it's done.
There's been a discussion on the subject but i don't get the jsFiddle to work as supposed to and many of the other replies seem to miss the OP's intention.
Is it doable? And if so, is it doable without vendor prefixes?
Yes, you can do it, and without the vendor prefixes:
Place a div over the text area. In this div class="fadeout"> you put an image that has a gradient of increasing white, being transparent in the top of that image and only white (or the background-color of your page) at the bottom. The text in the underlying text area will look like being faded out.
The Image can be replaced by CSS-Gradient:
.fadeout {
background-image:
-moz-linear-gradient(center top , rgba(255, 255, 255, 0) 20%, #FFFFFF 95%);
}
but this has vendor-specific prefixes.
They're doing it using CSS3 background gradients but you could achieve the same effect using an image. Just a little png image would sort you out.
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.
Right now I have this CSS for a button:
background: #19558D url(../images/gradient.gif) repeat-x top left;
The gradient appears, but the background color doesn't. When I reload the page, the color appears for a split second, but then disappears to the gradient. How can I get both of them to work?
Ok, so you have several options:
1. Use Only Images:
You can do the job by editing the gradient so that it looks exactly how you like it to be, without any new CSS. (This would be the one you used to solve the problem).
2. Use Image on the top and the rest in solid color:
element{ background:#000 (url) top left repeat-x; }
This will place the image in url at the top, and make the rest of the element of a certain solid color. Be aware that if the image covers all of the element and isn't transparent, then the solid color will not be visible.
3. Make the gradient transparent/alpha:
If the gradient covers all of the element, you can make it transparent, or semi transparent, so that the CSS background-color is visible behind it. For example, if you make a gradient that goes from black to transparent, and then add a white CSS bg, then you will get a black to white gradient. Be aware that the only images that will work with this method are .png ones because they are the only ones that support alpha levels (partial transparencies).
is the GIF transparent? I use PNG format as PNG-24 allows alphablending masks, where as GIF only supports transparent or not (1/0)
But I think you need to post a link to it or a image of what it looks like, including the GIF.
We need some pixels specs, such as width and height to fully understand the problem.
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.