This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 8 years ago.
Wasn't sure, how to name this question, but, I've ran into a problem (minor, but still), I have a main div container, which is basically a white text box, that is 92% opaque:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
filter: alpha(opacity=92);
opacity:.92;
This works fine, however, on some pages I have a Jplayer audio player and that turns 92% transparent too. Does anyone know a way where I can still have the transparency, but keep objects inside the main div container fully opaque?
Use This CSS-
#div{
background: rgba(255, 255, 255, 0.92);
}
Then Use this script for browser compatibility in IE.
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
</style>
<![endif]-->
Use background: rgba(255, 255, 255, 0.92);
When you use the background property it only applies the alpha (the last value, opacity) to the background itself. Use this instead of the ms-filter as it works across all **modern browsers.
#parent{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
}
#parent>*{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
This'll make the parent's alpha 92% and it's children 100%. But I can't remember if this sets the Opacity of the element or the alpha? Because if it sets the opacity of the element. Every element within the parent will also be affected. Another way would be to use an background image, selecting ie 8 and below to use an alternative method or some very awkward positioning.
Related
This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 9 months ago.
As the title says I am trying to add a gradient background to the one page on my website. I am currently doing this in CSS:
body {
background: rgb(85,205,252);
background: linear-gradient(45deg, rgba(85,205,252,1) 0%, rgba(255,255,255,1) 35%, rgba(247,168,184,1) 100%);
}
But doing it this way makes the gradient jagged and not very smooth.
View on JSFiddle
It should be looking like this
This is because the gradient is repeating over and over. It is doing this as it is the same size as <body>, which is actually very small as there is only that one .intro element taking up space within it.
You can fix this by stopping the background from repeating, and making the body the full height of the window at minimum, like so:
body {
min-height: 100vh;
background-repeat: no-repeat;
}
Edit: technically the 'no-repeat' is redundant when using a gradient background, as it will always fill the height provided the height is at or above 100vh.
However I would leave it there anyway as good practice just in case the background ever changes to an image; or for edge cases where the min-height may get overridden.
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'm trying to have a container element faded using:
zoom: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=14)"; /*IE 8,9*/
filter: alpha(opacity=14); /*IE 5,6,7*/
opacity: .14; /* Good Browsers */
Within this container, I have children elements that are positioned relative with position absolute children in those. IE 8 and below have determined that these elements shouldn't listen to the transparency and should show at full opacity.
Is there any way to make IE respect the transparency of the positioned elements they should have? These elements fade in/out and have effects on them, so I'd like to avoid having numerous IE hacks everywhere in javascript, and if I duplicate the transparency in CSS on them other browsers will fade them again, making them almost invisible.
There are comments on JQuery's .fadeTo() method page that reference this bug. Unfortunately, there also doesn't seem to be any fix at the moment other than to apply the fading to each absolutely positioned element instead of the parent.
Try this technique, it's pretty cool. I've used this style:
.alpha80 {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.8);
background: transparent !ie;
zoom:1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff,endColorstr=#CCffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff, endColorstr=#CCffffff)";
}
And then for your HTML:
<div class="alpha80">
<!--your content-->
</div>
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.)