I am trying to create a buttonbar using simple <div> and change its opacity to 50% and give a background
But the elements which come inside this division exhibit the same transparency as there parent <div>. I want them to retain 100% opacity. (Which is not possible). How to make this Possible?
A sample CSS of what I am trying to do is this
<style>
#bar { background:#09f;opacity:0.5; }
#bar a { background:#FF0;opacity:1; }
</style>
<div id="bar">
Home
Contact
Feedback
</div>
You need to use the rgba property for that, since opacity affects all children.
#bar { background: rgba(0, 120, 255, 0.5); }
Chris Coyier (CSS-tricks) has written a post about this: http://css-tricks.com/rgba-browser-support/
if you want only the background to be opaque, you could use a transparent png or an rgba-value as background. otherwise this isn't possible (as you mentioned).
Set the opacity in your graphics editor and flatten the two layers together.
You can also add another element.
(You should also be using a list.)
Related
I want to make my webpage with a background-color with opacity: 0.5 but the content inside the webpage will have an opacity: 1, as the default value.
The problem is that if I set opacity: 0.5 to the container, all the childs inside this container gets the same opacity value.
I have searched about opacity specifications and saw this:
Inherited No
but in my case it is being inherited so I have searched a bit more and found another transparency specification in which I saw this:
If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .
So, as it seems that it is impossible to set a parent with less opacity than its childs, is there some workaround to get it?
Note: I think that in this case is not very important to add code (because you can reproduce it easily) but here I have created a simple JSFiddle "to play" with it.
Thanks in advance!
No, it's not possible.
If you only want a semi-transparent background without affecting contents, you can use a rgba color.
The RGB color model is extended in this specification to include
“alpha” to allow specification of the opacity of a color.
For example,
body {
background: linear-gradient(to right, #fff, #ff0, #0ff);
}
p {
background-color: rgba(0, 0, 255, 0.3); /* semi-transparent solid blue */
padding: 70px;
}
<p>Semi-transparent background but fully opaque text</p>
Not possible. Opacity to a parent container will also apply to the children. If you want to have a background with an opacity effect you could use RGBA for the background color. This applies to solid colors and there is an option for working with gradients as well.
If you have an image you want to use, you could position absolute the image behind your content using a div/container. Give that container an opacity and a position.
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 9 years ago.
Hi all i created a parent div .ima inside which one div called .txt When i give a opacity to .ima then the opacity is applied to .txt automatically this is obvious. But i don't want it to be in this way.
Only .ima should be in 0.5 Opacity and the Text in .txt should be 100% visible.
Is there a way to do this?
Here is the fiddle
I tried Giving Opacity to 1 in .txt its not working. I might Be doing this in a wrong way I don't know.Any help?
Here i mention the Different From the Question refering for possible Duplicate
There They Have given Suggestion to Use rgba But here i don't want to use it Because if i use rgba then this will become either black or some other color that we'll mention.
I want to use background image here.
This is a sample am proposed.
Things like there is no possible.
Also I don't want to use .png images(with semi-transparency). images are subject to change that is why.
Any Way thanks for guys Who have given their answers here.
The simplest way of doing this assumes you only want .ima's background to be transparent, in which case you should remove opacity and establish a background-colour with a value of rgba(X%,X%,X%, .5), in which case .txt inherits nothing and you can carry on.
<div class="ima">
<div class="txt">
...
</div>
</div>
CSS for transparent background:
.ima {
/* rgba is Red, Green, Blue, Alpha:
* put in your colour as RGB then add opacity at the end */
background-color: rgba(255, 0, 0, .5);
}
But if you want some of .ima's children nodes to inherit the transparency (for instance text and elements other than .txt) then the simplest way is to create an immediate descendant that matches the dimensions of .ima and applies the opacity rule:
<div class="ima">
<div class="txt">
...
</div>
<div class="ima__transparency">
...
</div>
</div>
CSS:
.ima {
position: relative;
}
.ima__transparency {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: .5;
}
.txt {
position: relative;
z-index: 1;
}
Example with background image.
You can't not inherit opacity, your options are:
Adjust your markup so that .txt is not a child of .ima and then use absolute positioning
Don't use opacity, make .txt cover the same area as .ima and give .txt a semi-transparent background
If your target audience supports gradients and multiple backgrounds, you can layer an obscuring gradient over the image:
background: linear-gradient( rgba(255,255,255,0.5),rgba(255,255,255,0.5)),
url('http://www.bing.com/az/hprichbg/rb/NewportOR_ROW5865752464_1366x768.jpg');
Using this approach you actually only need one div if it's just the text and the image you want to display.
Create a png image(1px/1px) transparent with 60% opacity using photoshop and call in your parent div i.e.
.ima{
background:url(imagename.png) repeat 0 0;
}
Unfortunately you can't using opacity as it is inherited by design.
You could, however, if you are only seeking to make the background color of the parent div semi-transparent using rgba color syntax and a fallback for older versions of ie that do not support the syntax.
e.g. Create a white background with an opacity of 50%.
.parent{
background: rgba(255, 255, 255, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); /* IE6 & 7 */
zoom: 1;
}
/* IE9 hack to remove filter */
.parent:not(dummy) {
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}
The first two hex values in the filters represent the opacity of the background. There is a great explanation and rgba to hex converter here.
Word of note. Using this technique reveals a bug in IE where hyperlinks will be exposed through the background of the container if placed above them, for example if used to generate a model background.
You can use :after/:before
HTML <div>asdsadasd</div>CSS
div{position:relative;}
div:after{
content:'';
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: #000;
opacity:0.3;
z-index: -1;}
The thing is, the opacity property applies on the whole block. It means that if you apply a 1 opacity to any child element, it will have the maximum opacity towards its parent.
I suggest you use a semi transparent PNG background and add a fix so that older versions of internet explorer handle the opacity :
.ima {
width:auto;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='url_to_transparent_image.png');
}
.ima[class] {
background-image:url('url_to_transparent_image.png');
}
.txt {
color:white;
}
That is, it's only if you really need a totally opaque text. You can also set the opacity of the parent a bit higher so that your text isn't too transparent and avoid using "dirty" CSS tricks.
I have a CSS-element with opacity above a picture in the background.
Inside that element there is an image, that inherits the opacity, so the image is somewhat darker than it would be normal:
<body>
<div class="trans">
<img class="not_trans" src="test.png">
</div>
</body>
CSS:
body{
background:url(stars.gif);
background-color:black;
}
.trans{
opacity:0.4;
}
img.not_trans{
opacity:1.0;
}
But the image is still half transparent.
How can I achieve a normal non-transparent image without moving the img out of the div?
If there are a lot of elements cascaded with different background-colors, using
background-color:rgba(0,0,0,0.4) instead of opacity is not an easy option
I only want one img element not to inherit the transparency of the surrounding elements
At least there would be a solution with javascript:
move the img tag in the DOM out of the div
set a spacer there instead
position the img where it was with position:absolute
But is there a solution with CSS?
Use rgba on your .trans instead of opacity! Like rgba(0, 0, 0, 0.4); or whatever color you have.
I have a div in which there is an a tag.
I gave opacity:0.5 to the div then the text inside opacity is also 0.5
I don't want to use background image, then how can I have a text with opacity:1 inside my div with opacity:0.5 ??
Set the background color of the parent using rgba (includes alpha transparency). Example:
.Container {
background-color:rgb(0,0,0); /* fallback for IE 8 and below */
background-color:rgba(0,0,0,0.5);
}
.Text {
color:rgb(255,255,255);
}
This sets the opacity of the background of the container when using colors, however it does not set the opacity of the children. If you need to do that, set the opacity of the children to whatever you'd like with another class:
.OtherChildItem {
opacity:0.5;
filter:alpha(opacity=50); /* IE 8 and below */
}
If you want to use a background-image, just set the opacity on the image itself (use a PNG).
You can't. The real child opacity can't be greater than its parent's opacity in the HTML rendering model.
From the documentation (emphasis mine) :
Opacity can be thought of as a postprocessing operation. Conceptually,
after the element (including its descendants) is rendered into an RGBA
offscreen image, the opacity setting specifies how to blend the
offscreen rendering into the current composite rendering.
You must put your child div outside the parent div. This is usually achieved using a different kind of positioning than the static one.
Use a totally different <div> for the text.
<div id="parentDiv">
<div id="mainDiv">
</div>
<div id="childDiv">
Hello
</div>
</div>
CSS
#parentDiv
{
position:relative;
}
#childDiv
{
position:absolute;
top:45px;
left:45px;
opacity:1;
}
#mainDiv
{
width:100px;
height:100px;
opacity:0.5;
}
Check it out : http://jsfiddle.net/AliBassam/aH9HC/ I added background colors so you can notice the result.
Since I'm forcing you to use absolute, I don't want you to have a problem with positioning the text, so make some mathematical calculations to get the best position:
top = ( Height of Div Opacity(0.5) - Height of Div Opacity(1) ) / 2
left = ( Width of Div Opacity(0.5) - Width of Div Opacity(1) ) / 2
The a tag takes opacity from parent div. You can use the rgba CSS property on div rgba(0, 0, 0, 0.5) and again on a tag rgba(255, 0, 0, 1.0).
Like the answer above states, you'd need a separate div for the text, absolutely positioned to fit over the opaque div. You might want to set the z-index to something high as well.
Warning: this solution will work only if you want outer element to be completely transparent.
Instead of opacity: 0 and opacity: 1 use visibility: hidden and visibility: visible
Worked in my case (may not work in yours but it's worth the shot) :)
I have a DIV with CSS styled background color and an opacity of 0.7. Works perfectly. BUT... inside that DIV tag there is an IMG tag. My problem is that the IMG gets the same opacity as the DIV, which I do not want. I want the IMG to be non-transparent and have tried setting "opacity: 1 !important;" for IMG, but it is still semi-transparent as the DIV.
Can anyone help, please?
you can't do this using opacity, as this always affects all child elements. you could try to use an rgba-color as background for your div instead (which is supported by all modern browsers) and leave out the opacity.
background: rgba(0, 0, 255, 0.7); // 70% opaque blue
Hi I am mentioning the property through in which you can increase and decrease the opacity of parent container background and that will not affect the child container. It's simple see the css basically you have to use the rgb color in background & alpha for opacity.
background:rgba(146,146,146,0.1);
or see the example:- http://jsfiddle.net/8LFLd/20/
I think you can't keep that from happening. You'll probably have to go with a img outside of the div and put in in there with some messy position: absolute; CSS. It isn't clean but whatever works. I prefer oezi's solution, but that might not be compatible for what you want to do. If it is though, you should definity go with oezi's solution.
<div>
<img src="" alt="">
<div style="position: absolute;">
Content
</div>
</div>