I'm trying to achieve exactly this, using chrome on mobile ios device.
It looks perfect on desktop, just not on mobile.
CSS:
html {
background-color: black;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.95)), url("data:image/png;base64,my image b64");
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.95)), url("data:image/png;base64,my image b64");
background-attachment: scroll;
background-size: 64px;
image-rendering: pixelated;
font-family: arial;
font-weight: bold;
text-shadow: 0 0 6px #000;
color: white;
}
The image is 16x16px. Here's what it looks like in browser first:
Here's what it looks like on chrome ios mobile:
The upscaling doesn't seem to be working, but also the gradient.
Any help is appreciated, thanks
I ended up adding an absolute positioned div with 100% width and height with z-index -1000 and applied the linear gradient to that. Looks great on firefox, chrome and their mobile counterparts.
For the upscaling I used image-rendering: crisp-edges and pixelated and the -webkit variants for all around support.
Hope that's useful for someone :)
Caniuse.com says that Edge has full support for mask-image but the following code is working in all browsers for me except Edge.
width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
This should produce a simple red box which is red a the top and transparent at the bottom. Tested in Chrome and Firefox with no problems.
So, is it just incompatible with linear-gradient? I have scoured the web but can't find an answer.
Here is my testing code.
#masked {
width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
<div id="masked"></div>
I've found that if I do not add -webkit-mask-image, when running on Chrome, there will be no transparent at the bottom.
But it always works well on Edge.
My version is Microsoft Edge 44.17763.1.0,Microsoft EdgeHTML 18.17763.
According to Can I Use, mask-image is supported in Edge 18, but is hidden behind a flag in lower versions.
Couple additional things:
If you're doing this on a picture element you need to add it on the img and not the containing picture.
Even in 2022 you still need -webkit-mask-image. Preprocessors should add this though.
If you have been using custom properties such as --theme-color: red make sure you only add a single dash for -webkit and not the double dash my stupid brain automatically entered for me today.
My issue is caused by having a background gradient on top of an image.
How do I add the other properties e.g. -webkit, -o, to make it work in other browsers
div{
background:
linear-gradient(
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.8)
),
url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg');
}
http://jsbin.com/rovini/1/edit?html,css,output
EDIT
If I add the vendor prefixes like so:
div{
background:
-mox-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)),
-webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)),
-o-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)),
linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)),
url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg');
}
It does not work
You can use this. JSFIDDLE
div{
height:100%;
width:100%;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.2)), to(rgba(0,0,0,.8))),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* Saf4+, Chrome */
background: -webkit-linear-gradient(top, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(top, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* FF3.6+ */
background: -ms-linear-gradient(top, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* IE10 */
background: -o-linear-gradient(top, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* Opera 11.10+ */
background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.8)),url('http://www.nhm.ac.uk/resources-rx/images/1007/women-artists-peach-banner_128346_2.jpg'); /* W3C */
}
div {
background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.8)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.8)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.8)); /*Fx 3.6-15*/
background: linear-gradient(to right,rgba(0,0,0,0.2),rgba(0,0,0,0.8)); /*Standard*/
}
You can see full examples from w3schools. Just remember to put the standard syntax last.
Original answer
What you need are called vendor prefixes. These allow support for css3 features which are not yet applied in general accross the browsers.
the simple syntax is: -prefix followed by -property-name
in your case it will be:
-webkit-linear-gradient(...)
-moz-linear-gradient(...)
-ms-linear-gradient(...)
-o-linear-gradient(...)
linear-gradient(...)
webkit is for safari and chrome, moz for firefox, ms for IE and o for opera. But recently, webkit. The final one, without any prefix is for the possibility that the feature gets cross-platform support in future.
Added after 1st comment
you need to put them with along with other css rules for the dom element, ie, if you are writing css for a div with id papaya:
div#papaya{
color: ...;
font-size: ...;
-webkit-linear-gradient(...);
-moz-linear-gradient(...);
-ms-linear-gradient(...);
-o-linear-gradient(...);
linear-gradient(...);
/*any other properties*/
}
This is just a shorthand way of grouping multiple background properties:
background: url('cats.jpg'), #000000;
which equates to
background-image: url('cats.jpg');
background-color: #000000;
What I wrote originally did not work because the browser looked at the 'background' property and couldn't understand the values I had used (the vendor prefixes).
Unfortunately, because I was stacking a gradient over an image, the vendor prefixes could not all be included in one reference to background. So, like Vlada903 said, the vendor prefixes need to be in their own reference to background so the browser can scan each, before finding the one it is able to understand and use.
I have div with opacity:0.80; property that contain text and button. The problem is that button and text also inheritance opacity from div. How to fix it?
I already tried to add opacity:1; to button and text <p> tag, but it does not helps.
I think you want the opacity on the background instead. As Prisoner said, not supported by old browsers.
background-color: rgba(0, 0, 0, 0.8);
w3schools: RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
you can't fixed it.Child elements also getting parent opacity
One solution is using rgba:
USE :after pseudo element
element:hover:after {
background-color: rgba(0, 0, 0, 0.1); // black with opacity 0.1
}
I have almost invisible text on the webpage with opacity: 0.1;
I want it to become visible when selected.
However, the selection is also almost invisible.
Unfortunately, ::selection doesn't change the opacity.
You won't be able to use the opacity property with ::selection. It was never one of the allowed properties, and even if it were implemented, it wouldn't make sense as you're not modifying the opacity of the element itself anyway.
You can use rgba() colors with the text and background rather than opacity on the entire element instead. It's not the ideal workaround, but it works at least for colors:
body {
color: rgba(0, 0, 0, 0.1);
}
::-moz-selection {
color: rgba(0, 0, 0, 1);
}
::selection {
color: rgba(0, 0, 0, 1);
}
<p>Almost invisible text that turns opaque on selection.
Instead of using opacity, just set the alpha in the rgba color like so...
::selection {
background: rgba(255, 255, 0, 0.5)
}