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`
};
Related
.mainheder {
background-image: rgba(0,0,0,0.7), url(imgs/slider-01.jpg);
background-size: cover;## Heading ##
height: 100vh;
}**strong text**
use background property, and it use linear gradient rather than rgba,
follow this article for more.
link to article
enter code here
.mainheder {
background:
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
url(imgs/slider-01.jpg);
background-size: cover;## Heading ##
height: 100vh;
}**strong text*
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.
This CSS validator says the background value in this css block is invalid:
.sticky_scroll_box2 {
background: rgba(0.95, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.95);
opacity:1;
z-index: 13;
}
Why is that?
CSS validator says the background value in this css block is invalid because RGBA value can't be in decimal (besides the opacity/transparency)
RGBA only accepts integer, by using a number in floating point, CSS validator will throw an error
You need to change your css to
body {
background: rgba(1, 0, 0, 0.05);
}
RGB only accepts integer numbers (0-255), only the Alpha accepts floats (0.00 - 1.00). You are using float for the Red value.
From this:
background: rgba(0.95, 0, 0, 0.05);
To this:
background: rgba(1, 0, 0, 0.05);
I am looking for a perfect solution for cross browser linear gradient including IE 8 and below support.
this is my current code
background: rgba(0,0,0,0.6);
background: -webkit-gradient(linear, center top, center bottom, from(transparent), to(rgba(0, 0, 0, .6)));
background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .6));
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)) repeat scroll 0 0 rgba(0, 0, 0, 0);
I want to generate the same effect for different browsers.
Please let me know how to get the exact same effect on all browsers by adding cross browser css code.
Thank you.
Using CSS3, what RGB-like value should replace VALUE below in order to achieve a solid black background that is 95% transparent?
div { background: VALUE }
Thanks Folks!!!
RGBa (a for alpha)
div { background: rgba(0, 0, 0, .05)};
You can use an RGBA notation.
R for red, G for Green, B for Blue and the A for aplha (percentage of transparency, as you've asked).
So the best answer is :
div {
background : rgba(0, 0, 0, .95);
}
And don't worry, it's supported by all the major browsers (even IE since IE 9) : http://caniuse.com/css3-colors
RGBa, i think:
div {
background:rgba(0, 0, 0, 0.95);
}
Folks i took a challenge test online and the following is the answers they provided to my question above:
div { background:rgba(0, 0, 0, 0.05); }
To check, I ran a test on my system and #Blingue is definitely correct.
Use div {background:rgba(0,0,0,0.05)}