have some live computed graph images from a source we don't own, and they have a white background that doesn't fit well with where we are displaying them. Is there any html/css way of getting rid of the white background? (javascript isn't an option in this case)
I was looking at css masking - tried setting the mask-image to be the same image, and the mask mode to be luminance -
html:
<img src="https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048" >
css:
img {
mask-image: url(https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048);
mask-mode: luminance;
}
that seemed to me that it should work - but it actually had no effect at all :(
First of all you should know this: https://caniuse.com/#search=mask
And then look at this fiddle: https://jsfiddle.net/9y27jaLh/1/
As explained in caniuse, there's partial support for webkit i.e. prefixed properties will work such as -webkit-mask-**
mask-mode is not supported in 90% of the browsers, including webkit based.
Also "luminance" means the areas with the brighter colors will show while the darker ones won't, and a whole gradient of in-betweens. So it's pretty much the exact opposite of what you need.
If it's just to change the background color, you might slightly tint it, perhaps with a semi-transparent overlay. If the images have a known shape, you could try clipping / masking with SVG patterns..
or maybe try to hack it setting the images as background and searching for a background-blend-mode that does the trick... sort of.
But no way to apply the same image as a mask to get rid of the white
Related
Hy guys. I have this problem. So I have an image. In front of that image is simple element with width and height. I want to blur that element so it looks like that part of the picture is blurred. I cannot have any image or background-image in that element. I want to achieve this effect without using any additional image, just css. I tried to put background colour, reducing the opacity and putting filter: blur but it doesn’t look good. I can still read the text that is supposed to be blurred.
It's not possible to do this with full support without javascript, at the moment. But in case you want to support a limited set of browsers, you can use backdrop-filter
The backdrop-filter CSS property lets you apply graphical effects such
as blurring or color shifting to the area behind an element. Because
it applies to everything behind the element, to see the effect you
must make the element or its background at least partially
transparent.
I am trying to add a background image to a button, which already has gradient. But it appears to be not working.
Here is my CSS:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',
endColorstr='#131313',GradientType=0),
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./media/images/mail.png");
I have also tried with -ms-filter but did not work.
This issue is only with IE8.
IE8 does not support multiple backgrounds natively.
You might try a polyfill CSSPie
I dont know if even using PIE you can mix images and gradients on an image.
An easier solution would be to have the button use the gradient and you could add a <span> element inside the button which would have as a background your png image.
Also, you could write your CSS such that only IE8 is targeted to show and load an image within the <span>.
I have a lot of png-images, and now I want to change their color. I could open all these images in photoshop and add a Layer style - Color Overlay.
For example:
http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
Change the black color to gray.
But is there an easy way to do this with HTML5/CSS3?
It's possible with just CSS but has so major limitations it's far from a perfect solution.
HTML
<img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>
CSS
img {
-webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}
The limitations being
Webkit only
Can only change black to something more transparent, i.e. grey. Colour masks are not possible.
See demo - Tested in Chrome 26.
(A bit late)
If you know the background will remain the same color throughout the entire website and you don't mind messing around a bit in Photoshop, you could of course fill the transparent part with your background color and cut out the icon to make that part transparent.
That way you can place a background color behind it and make it whatever color you want...
HTML
<img src="transparencyswitch.png" height="20" width="20"/>
CSS
img {
background-color: grey;
}
I recommend converting your PNG into a SVG. I had the same problem, till I did that. From there, you only have to change the fill color (which can also be dynamic for, for example, wordpress)
A way of doing this is to put the image in a div and put a div above that with opacity so you still can see the image a little bit but it has the color of the overlaying div.
Other ways aren't possible with html5/css3.
examples: here
I am trying to get CSS3 behavior on IE8 using the .htc file
So there are two things that I am applying on the same element (rounded corner & gradient)
But for some reasons, I cannot get the two effects to work simultaneously: the gradient is applied, but rounded corner is not. It works if I apply the class individually (i.e. only rounded corner OR only gradient).
You can see the page at
http://uiux.atwebpages.com/skeletal.html
(See the Curriculum/Classes divs)
Not possible to tell without looking at your CSS code, but there's probably a syntax error in your CSS which is causing one of them to fail. To confirm this, add a property directly below the one that fails and you should see it has no effect.
Edit: this doesn't work in IE8, but it doesn't cause my CSS to break in IE8 either.
border-radius: 10px;
Microsoft also has its propriety gradient tool:
filter:progid:DXImageTransform.Microsoft.gradient(...);
But the best way to show a gradient is to draw one on photoshop, then cut the width to 1px and use that image as a background image.
Is it possible to repeat-x and repeat-y just a specific portion of an image sprite? I can obviously separate the image into different files, but I was hoping there's a more efficient way of doing it.
Not for background - CSS3 provdes this for borders. You can combine a tiled background with a sliced border to achieve the desired effect.
(Browser support is not complete, though)