Related
How do I apply the css property background inline in react?
I tried passing the following object, which didn't work:
let style = {
background:
`linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
), url("${ place.imgUri }") no-repeat center center cover`
};
Note: it does work when only adding the url property.
The reason why I want this is because I need to add a linear-gradient as well, aside from a dynamic background-url.
If I define it via a css class rule, it is being overwritten by the inline-style.
Edit: I really don't understand why to close this question because off topic. If a css label is needed, just say so in the comments (?).
A , in the background shorthand rule separates 2 backgrounds, not just 2 background-images.
So if you need 1 shorthand rule that overrides all of the properties:
background:
`linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) no-repeat center center / cover,
url("${ place.imgUri }") no-repeat center center / cover`
With the help of Gabriele Petrioli, it worked.
I just added:
let style = {
backgroundImage:
`linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
), url("${ place.imgUri }")`
};
Then just added css class properties additionally:
background-size: cover;
background-position: center;
background-repeat: no-repeat;
The are a couple of issues with the original code.
First, because linear-gradient refers to the background-image property so you actually need two backgrounds, you need to use , to separate them.
Secondly, the syntax for background-size in the shorthand version is after /.
So it should be
let style = {
background:
`linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
), url("${ place.imgUri }") no-repeat center center / cover`
};
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.
it's useful when developing to know all the css properties implemented for specific element but chrome stable release doesn't do that,
here is and example, the body element have gradient background but of course to implement this on all the browsers you have to do this
background: -webkit-gradient(radial, center center, 500, center center, 1400, from(transparent), to(rgba(0, 0, 0, 0.6))) white;
background: -webkit-radial-gradient(farthest-side, transparent 90%, rgba(0, 0, 0, 0.2) 150%) white;
background: -moz-radial-gradient(farthest-side, transparent 90%, rgba(0, 0, 0, 0.2) 150%) white;
background: -ms-radial-gradient(farthest-side, transparent 90%, rgba(0, 0, 0, 0.2) 150%) white;
background: -o-radial-gradient(farthest-side, transparent 90%, rgba(0, 0, 0, 0.2) 150%) white;
background: radial-gradient(farthest-side, transparent 90%, rgba(0, 0, 0, 0.2) 150%) white;
like here
so when you inspect the body element in chrome stable release you get this
but in the canary you get this
so is there away to enable the stable release to show all the repetitive properties?
Well, Chrome simply ignore the properties that are not targeted to him ... it's normal. If you want to test / debug your code for other properties (with other vendor prefix) you should test / debug them with the right browser : chrome dev tools are not made for this.
I have this code
.sidebar-button
{
color:#ffffff;
background-color:#ff9933;
background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffae5e), to(#ff9933));
background-image:-moz-linear-gradient(top, #ffae5e, #ff9933);background-image:-ms-linear-gradient(top, #ffae5e, #ff9933);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffae5e), color-stop(100%, #ff9933));
background-image:-webkit-linear-gradient(top, #ffae5e, #ff9933);background-image:-o-linear-gradient(top, #ffae5e, #ff9933);
background-image:linear-gradient(top, #ffae5e, #ff9933);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffae5e', endColorstr='#ff9933', GradientType=0);
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#ff9933 #ff9933 #ff8000;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
but it renders as text with orange background. Any idea why it doesn't render correctly? Am I missing something?
height: 30px;
width: 100px;
You need to make the width and height of the button:
http://jsfiddle.net/uJR2t/
Once you start styling it, you have to style it completely. It doesn't inherit the basic button attributes. You can also use something like this http://css-tricks.com/examples/ButtonMaker/ to quickly create more detailed buttons.