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);
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`
};
Does anybody know how to change the grey x and y scale to black in the JavaScript graphing library chartist-js? I've looked in the CSS file but I can't seem to find anything.
In Chartist.css, Search for .ct-label, and change last value in rgba, which is the opacity value between 0 and 1. E.g to:
.ct-label {
fill: rgba(0, 0, 0, 0.8);
color: rgba(0, 0, 0, 0.8); }
For modern browsers I use background: rgba(0, 0, 0, 0.75); for a full viewport div overlay.
It wasn't working for IE8 and below, so I searched for a solution and I found this on css3tricks but tweaked the values a little:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
It works, however its not the equivalent of background: rgba(0, 0, 0, 0.75);. <- This one appears lighter then the other one. But I have set the opacity on the MS filter to 99% but it's still appears lighter.
Does anybody know how I can get the same result?
Quote from MSDN http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx:
Color is expressed in #AARRGGBB format, where AA is the alpha hexadecimal value, RR is the red hexadecimal value, GG is the green hexadecimal value, and BB is the blue hexadecimal value. The alpha value controls the opacity of the object. An alpha value of 00 is transparent, while a value of FF is opaque.
This means:
#3f000000 == rgba(0, 0, 0, .25)
#7e000000 == rgba(0, 0, 0, .50)
#bd000000 == rgba(0, 0, 0, .75)
So the following CSS should produce equivalent background on IE6, IE7 and IE8:
background-color: rgba(0, 0, 0, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bd000000,endColorstr=#bd000000);
You should put the filter property inside a conditional CSS for < IE9, otherwise IE9 seems to apply both properties and the result gets darker.
However, I'd instead suggest using a small semi-transparent PNG with the desired color as background-image with background-repeat: repeat; for better browser support - if needed.
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)}
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)
}