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.
Related
I am working on front-end web development and keep running into the same issue. I am using bootstrap styling rules (bootstrap.css) with a few modifications.
HTML
<div class="container">
<div class="jumbotron">
<button type="button" id="jnav">Restricted</button>
</div>
</div>
style.css
#jnav{
opacity: 1;
}
From bootstrap.css
.jumbotron {
opacity: 0.75;
}
Basically, I wanted to use ID to override the opacity, so that the button would have an opacity of 1 while the rest of the jumbotron would have an opacity of 0.75. The problem is that the button's opacity is remaining at 0.75 (so it is annoyingly the same as the jumbotron background)! Does anyone know what's up? Is there something basic that I am missing? I thought that id was a more specific attribute and would override class styles.
Opacity doesn't inherit in the same way as things like color or background. Setting the opacity of an element makes that element and everything it contains render at that opacity relative to whatever is behind it. The opacity property of chile element then compunds like #techfoobar said. You can read more here.
Basically, what you need to do is set the opacity for each child of .jumbotron separately while leaving the opacity of .jumbotron at 1.
It's hard to say given the limited information, but it sounds like you're trying to place a button (#jnav) inside the jumbotron which has an opacity. Since the jumbotron has an opacity of 0.75, everything inside of it will follow that same opacity regardless of any other rules. This is not a problem with class/ID specificity or bootstrap, more just a general styling nuance.
Basically what Jcubed just said above.
Typically the selectors used in Bootstrap.css are very specific. The selector might be something like body > div > .jumbotron which is very specific. In this case simply using the element Id won't override the css. You will need to match the specificity or be more specific. For example body > div > #jnav would effectively override the css as they are both equally specific.
This of course assumes that the css you want to use comes after the css you are replacing. Either after it in the same css file or a seperate css file included after the base Bootstrap.css.
If worst comes to absolutely worst, then you can use:
#jnav{
opacity: 1 !important;
}
But this shouldn't need to happen unless you are absolutely desperate.
They do not override each other. They both applied, but #jnav is within .jumbotron. So .jumbotron's opacity will apply on top of #jnav's opacity.
If you just want the effect, you should use rgba
Example:
#jnav{
background: rgba(111, 111, 111, 0.1);
}
The last index is the opacity of the background, and it will not overlap with your font.
#jnav does have an opacity of 1. But that would be, in a sense, relative to its parent .jumbotron with an opacity of 0.75.
As techfoobar mentions, opacity is compounded with the inherited value. And hence, #jnav's opacity will effectively be 1 * 0.75.
Here's what MDN has to say:
The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.
View this question, if you want to achieve a transparent background but not the content effect.
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().
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.
I am using the following css to make all items in the main DIV of my page to be transparented:
#wrapper
{
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
This works and everything gets transparented. But for example I DO NOT want the texts, images and buttons to be transparented. How can I do this?
You can do this like so:
#wrapper{
color:rgba(255,255,255,0.9);
}
You will have to use rgba() to achieve this. Take a look at this website:
http://www.css3.info/introduction-opacity-rgba/
I did also come over this problematic and solving it with rgba() is really the best way to get around this. Using transparent images as background, in my opinion is not as flexible as it should be and I'm really against using images when you can achieve the effects you want in other simpler ways.
You need to use a transparent background (in png) for your wrapper and do not use opacity
The child-elements inherit the opacity and you can not directly change it back. But there is a workaround http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
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.