input[type="text"], input[type="password"]{
opacity:0.5;
}
This fades both - input body and border. I don't want border transparent, just body, so the underlying image is visible. User-text inside the input should not be transparent, of course.
input [type="submit"]{
margin-left:50px; // here nothing works at all.
}
The opacity property influences the opacity of the whole element. Your question is bit vague, but I assume that you want to have a semi-transparent background, while the content and borders shouldn't have transparency.
To do so, you need to set a semi-transparent background to the element. This is called alpha-transparency, as a fourth color channel - the alpha channel - is used to store the transparency information (usually in an image like a PNG).
In modern browsers you could use the rgba() value for the background property:
/* semi-transparent white background */
background: rgba( 255, 255, 255, .5 );
In MS IE you could use a gradient filter, which supports ARGB colors since MS IE 5. Just fade from a color to itself: (be aware, that the alpha channel comes first and all four color values are noted as two-digit hexadecimals)
/* the same for IE 7+8, should get included in a separate MS IE specific stylesheet */
background: none;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
Opacity works on the whole text input including the text inside it. So your code won't work.
Option 1) Can you use CSS3? If so, use (with the color you want, of course):
background-color: rgba(255,0,0,0.5);
Option 2) You can set the background of the Input as the image you want to see.
Option 3) You can set the background as a semi-transparent solid color image (.gif/.png, which can be 1x1 in size and repeated in X and Y).
For the submit, you need to get rid of the space in your selector:
input[type="submit"]{
margin-left:50px;
}
And you can't specify what parts of the element you want to make transparent with opacity. It applies to err'thang. There might be 'hacks' of sorts to achieve what you want, such as using a wrapping div to create the border.
Related
I have a dark/black background image and a white input field. I gave the input field an opacity of 50% and I want the text/value to be solid white(#fff). BUT when I apply the opacity it effects both the background of the input element and the text. How to I only change the background of the input field?
For that you could use background-color: rgba(0, 0, 0, 0.5). The first three numbers are the background color in rgb (red, green, blue) format and the fourth number is the opacity level on a scale from 0 to 1.
From what you say, you only want the background to be affected.
For backgrounds to be (partially) transarent, you have to use a
a) PNG background
or
b) a RGBa background- see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
Like so: background:rgba(0,0,0,0.2);
This is not supported in IE8 and below.
The problem is that you are changing the opacity on the entire element. As such, all child elements strictly inherit the transparent properties.
There are a few things you can do.
You could target only the background and set it to an RGBA value:
background: rgba(255, 255, 255, 0.5);
This wont work in IE8 and before, so you can use a workaround using linear gradient filters:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );
You will notice that the first 2 hexadecimal places are #80. This is not a mistake and is not a decimal value. Hexadecimal is base 16, this makes #80 the median point therefore setting your opacity to 50%. It's a little confusing, I know!
You could remove styling from the input field and, instead, add a wrapper around your input fields and style that instead.
You could use a semi-transparent PNG as the background image and set it to repeat.
Why not simply make a half-transparent png and use that as background image instead of setting the input opacity? Or if you don't have to support IE8- you can also use rgba().
I'm building a new website, and I'm looking for a transparent navigation bar so the background is visible.
There is not a Transparent color code, but there is an Opacity styling. Check out the documentation about it over at developer.mozilla.org
You will probably want to set the color of the element and then apply the opacity to it.
.transparent-style{
background-color: #ffffff;
opacity: .4;
}
You can use some online transparancy generatory which will also give you browser specific stylings. e.g. take a look at http://www.css-opacity.pascal-seven.de/
Note though that when you set the transparency of an element, any child element becomes transparent also. So you really need to overlay any other elements.
You may also want to try using an RGBA colour using the Alpha (A) setting to change the opacity. e.g.
.transparent-style{
background-color: rgba(255, 255, 255, .4);
}
Using RGBA over opacity means that your child elements are not transparent.
When you have a 6 digit color code e.g. #ffffff, replace it with #ffffff00. Just add 2 zeros at the end to make the color transparent.
Here is an article describing the new standard in more depth: https://css-tricks.com/8-digit-hex-codes/
All you need is this:
#ffffff00
Here the ffffff is the color and 00 is the transparency
Also, if you want 50% transparent color, then sure you can do...
#ffffff80
Where 80 is the hexadecimal equivalent of 50%.
Since the scale is 0-255 in RGB Colors, the half would be 255/2 = 128, which when converted to hex becomes 80
And since in transparent we want 0 opacity, we write 00
#0000ffff - that is the code that you need for transparent. I just did it and it worked.
You can specify value to background-color using rgba(), as:
.style{
background-color: rgba(100, 100, 100, 0.5);
}
0.5 is the transparency value
0.5 is more like semi-transparent, changing the value from 0.5 to 0 gave me true transparency.
According to MDN there is a transparent keyword, which is short for rgba(0,0,0,0).
{background-color: transparent;}
If you are looking for android apps, you can use
#00000000
Yeah I think the best way to transparent the background colour (make opacity only for the background) is using
.style{
background-color: rgba(100, 100, 100, 0.5);
}
Above statement 0.5 is the opacity value.
It only apply the opacity changes to the background colour (not all elements')
The "opacity" attribute in the CSS will transparent all the elements in the block.
Here, instead of making navigation bar transparent, remove any color attributes from the navigation bar to make the background visible.
Strangely, I came across this thinking that I needed a transparent color, but all I needed is to remove the color attributes.
.some-class{
background-color: #fafafa;
}
to
.some-class{
}
I want to give opacity for the div only at the bottom left corner.
Is it possible? how?
<div id="right_img"></div>
css
#right_img
{
float:right;
width:600px;
height:400px;
margin-top:100px;
background:url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
opacity:0.6;
filter:alpha(opacity=60);
}
If I give opacity to the complete div, image clarity will be lost.
Use a PNG image instead and make the transparency part of the image?
Giving Opacity to an element always affects the whole element and all of its child-elements too. If you want to give only one of it's children the opacity property, you have to declare it directly on that element. Sometimes you have to introduce some helper Elements to achieve the effect you want.
Exception is the opacity you declare on colors which don't get inherited to the child elements. With the new rgba() declaration, (the fourth parameter is the opacity of the color), you can achieve effect like having a "transparent" div (transparent background) but the font is completely opaque.
In your case it might be sufficient (interpreting your answer - it wasn't quite clear) to just use the normal background-declaration with this rgba background-color:
#right_img{
background:rgba(x,y,z,0.6) url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
}
with x,y,z = 0...255 and a = 0...1
Note, that the rgba() declaration is not supported in older IEs (even IE8!). You need a filter to support these. Luckily there is one:
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#aaxxyyzz,
endColorstr =#aaxxyyzz);
where the first parameter (a) is the opacity with 0% = 00 and 100% = FF. And xx,yy,zz = 00...FF.
If I have a HTML table like the one below:
<table bgcolor="#151515" height="100" width="200">
<tr>
<td>
Hello
</td>
</tr>
</table>
How can I make it partially transparent? Is there a way of doing it without CSS? If not what is the CSS way?
You can try this in your html file:
<table class='table1'>
<tr><td>...
And this in your css file:
.table1 {
background: rgba(255,255,255,0.5);
}
This sets the rgba RED GREEN BLUE ALPHA values, 255,255,255 = white, 0,0,0 = black, and the 0.5 value at the end (ALPHA) is between 0 and 1, where 1 is opaque and 0 is transparent. I hope this helps.
In your case, #151515 (HEX CODE) translates to (21, 21, 21, 0.5) (RGBA) where A is equal to 50% transparent.
You can set the opacity or transparency of the background in CSS, as follows
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
The above makes it 60% clear. Hope this helps.
With CSS you set the opacity to a value between 0 and 1. However, that will make any element inside your table transparent.
A better solution (unfortunately) is to make a tiling background png with slight transparency. That way you can fade the background without fading the content.
Replying to old post but this is still relevant as I just referenced it =)
Too... you can use fireworks or (presumably) photoshop to create an all black .png image (just a black box). Set your desired transparency with the toolbar and set said photo as your table background image. It defaults to repeat itself so will fill your table. You will have a transparent table that you can see your -body bg img/color- through and anything you put into the table will be unaffected by the transparency.
Jon
The way to change the background color and opacity is adding this attribute to your css.
background-color: rgba(100,200, 0, 0.5); (not background)
If you want to change the background+text content opacity, you can use:
opacity:0.6;
It is quite popular question, I think.
I am looking for crossbrowser CSS solution for black opaque layer. Which will hide all stuff under it.
My example: http://jsfiddle.net/pb9jv/. But it is not crossbrowser. (IE 6+ is the pain in my ass).
Try adding this the the CSS style you apply to the fadeover (In your example : #black)
filter: alpha(opacity = 50);
EDIT : You want it to be opaque or transparent like the given example?
Have a look at this, it does work on IE 6
Use a simple div and apply a background-image to it with a 1px size image of your color. Just a simple png with your black color.
.overlay
{
background-image:url('myoverlaycolor.png');
}
It will repeat itself across the complete div.
Edit
Come to think of it, IE6 doesn't support png right? Maybe you could just take a look in sources like slimbox.
David is right - that is the syntax.
However your fiddle will not work in IE6 since you have no size values.
Here is an example:
http://jsfiddle.net/4Aw4Q/
If you remove the sizing the element will not show.
#Marnix If you use proper filters IE6 does support PNG. Try this for starters
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pngimage.png', sizingMethod='scale');
Set the above filter in as a class for the span or div element containing the image and make sure the width and the height of the image are set.
Set this class also for the span or div element containing the image.
.PNGTrans img{
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
So the above to classes will have to be called for the parent containing the png image.
#fl00r : Have a div element with higher z-index with screen.width and screen.height as its widht and height respectively. You can either use an image or you can play with opacity filters.