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)}
Related
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.
I have a problem with coding of sliders with transparency. I don't know how to start? Has anyone seen similar examples?
With use the css:
.name_slider {
background: rgba(0, 0, 0, 0.2);
}
the last value (0.2) is the opacity : 1 is black, 0 is transparent. Just try diferent value to find the desired opacity.
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.
If you don't like webkit to highlighting links when tapping them, you can remove that effect with:
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
Actually I want this effect, but not the extra border added around the tapped element.
Is there a way to remove highlight border only?
If you are talking about that orange borders around inputs on focus, you might want to try to add outline:none; to your CSS properties.
Like so :
input { outline:none; }
a is missing
should be -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
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)
}