Is it possible to keep the background dark while adding opacity? I'm trying to create an input that looks like the image added. Every time I set the background to #000 and add opacity, the background starts to turn gray instead of staying black and becoming transparent.
Edit:
For everyone telling me to use:
background: rgba(0,0,0, 0.5);
This is the result (doesn't work)
Edit 2:
Here is a fiddle - http://jsfiddle.net/n7aob2yd/1/
The last value 0.5 is the alpha channel.
.selector {
background-color: rgba(0, 0, 0, 0.5);
}
What you're doing is correct. You see gray because the background is white. Try using a background like the one in your screenshot and you'll see that it works. And don't use opacity because it will apply it to everything, including the text. Now, try using a background color that matches the background image, in this case, a dark blue. Maybe that's what's missing.
I'm trying to create a transparent right trapezoid with color border using CSS 3 This is what I've gotten so far.
http://jsfiddle.net/bodyfarmer/bdhtn7kr/1/
Any help is appreciated
You have to place a right border on the containing object to get the correct look. Like this:
border-right: 20px solid red;
Here is the updated fiddle
I also changed skew to skewX. Per this link:
Note: The skew() function was present in early drafts. It has been
removed but is still present in some implementations. Do not use it.
To achieve the same effect, use skewX() if you were using skew() with
one parameter or matrix(1, tan(ay), tan(ax), 1, 0, 0) for the general
way. Note that tan() isn't a CSS function and you have to precalculate
it yourself.
In your code, you are missing part of the border rule.
border: 20px solid red;
Is there any major advantage to use:
background-color: rgba(0,0,0,0);
instead of:
background-color: transparent;
?
Behaviour is exactly the same, but transparent is compatible also with IE8.
RGBA is more advanced (but lacks IE8 support) and allows you to quickly modify it, in case you would like an "almost transparent" color, without need to completely change attribute.
For example, it could be very quick to set
background-color: rgba(0,0,0,0.1);
Due to default behaviour of browsers that ignored unrecognized properties, is possible to combine them in order to use new one in newer browsers, but leave a fallback for older ones, simply typing both of them:
background-color: transparent;
background-color: rgba(0,0,0,0);
Or, more useful, in case of alreasy cited almost transparent backgrounds, you can write:
background-color: transparent;
background-color: rgba(0,0,0,0.1);
New browsers will set rgba(0,0,0,0.1) as background, overriding previous transparent declaration, but IE8 will set transparent as background, because it will ignore unrecognized rgba() value, so a slightly different result but in according to Graceful Degradation principle.
To Note: background_color: rgba(0,0,0,0.0); would be more accurate but the same. As stated background_color: transparent; would be supported in older browsers.
Using the background_color is not the issue as it is used universally in both indicators.
The issue of question is in the assignment of transparent -vs- rgba.
transparent - obviously sets the background to a transparent background with no color option; the other choice is a specified color assingment in hex or other accepted color values such as blue rgb(x,x,x) rgba(x,x,x,x) #xxxxxx hsl(x,x,x) hsla(x,x,x,x) etc.
rgba(x,x,x,x) however is and is not a horse of a different color as it is more extensive and needs to be broken down to explain. Firstly the difference is that you are assigning a color and setting the transparency,
The "rgb" portion of the setting stands for red green blue representing the first 3 zero settings (0,0,255,X) and each 0 accepts values from 0 to 255. Playing with these three values in combination mixes the color settings to produce a single color.
The "a" in (rgba) and its zero setting (x,x,x,0) is the ALPHA channel that sets the opacity/transparency of the first three combined colors (x,x,x,?). Of special note this last zero value(x,x,x,0) accepts range of values from 0.0 to 1.0 . A 0.0 setting is fully transparent while 1.0 is solid. So, using the setting rgba(x,x,x,0.5) would produce a given color at half transparency.
I've found a scenario where you can spot a difference between the two.
I have a case where I want to place a red diagonal line as a strikethrough a div which needs the background to use transparent and not rgba(0, 0, 0, 0).
This is my code:
<div className="relative">
<p>Text here</p>
<div style={{background: "linear-gradient(to left top, transparent 45%, #d10813 48.5%, #d10813 51.5%, transparent 55%)"}} className="absolute top-0 w-full h-full"></div>
</div>
If you switch transparent 45% to rgba(0, 0, 0, 0.45) you can see that it doesn't work anymore.
So, in a few words transparent with opacity is not the same as black with opacity obviously.
(The code is in react and the classnames are from tailwindcss)
you want a transparent background in React Native, apply this piece of code
backgroundColor: 'rgba(1,1,1,0.1)'
I have got a table with white font on a blue background as you can see its not the easiest to read. is there any font/solution to make it a bit more eye friendly with css. im using ie6
(the info displayed is made up)
edit: I cant change the background image and colour because theyre the companies colours
You could give the tablecells a solid black background, and then make it slightly transparent.
td {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}
(css is from http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ , look there if you want to make it compatible with MSIE)
Personally, I think it looks fine, but to others it might be harder to read. What I'd do is give it a flat, untextured background, like you have in the image on the right hand column. You could possibly make the contrast a bit better by darkening the background. The only small issue I can find with your image is the textured background to the left.
I have a 1px by 1px grey pixel. It is used as a BG image:
background-attachment:scroll;
background-color:transparent;
background-image:url("../image/vertical-border.png");
background-position:393px 0;
background-repeat:repeat-y;
So I expect a grey, vertical line the height of whatever is tallest in the div. Common trick.
So I see this properly in every browser EXCEPT IE 8. In IE 8 it displays as a gradient. Dark up top, light down below. How crazy is that? I've never seen anything like this, and would love some insight.
Thanks!
Unfortunately this is a PNG rendering bug (surprise surprise), in most cases people increase the size of the tiled PNG image to say, 10x10 and the problem is removed. Hopefully this is ok for you - perhaps use a 1x10, or even better a 1x50...
A partial explanation, from memory, was the amount of processing required by IE to apply its filtering to 1x1 images, when you multiply it by the number of times it appears on the screen - its just too hardcore for IE.
See: IE8's rendering of transparent pngs is FUBARed on my site, and related posts/comments.
EDIT:
Hey, since it's just a vertical line, is it possible to just use GIF format instead? Or perhaps 8-bit, non alpha transparent PNG?
If it's just a 1px grey border you're after, why not just use a 1px grey border?
Example:
border-right: 1px solid #cccccc;