Prevent IE8 from making content transparent - html

I have a div with its individual CSS for IE8, it is transparent. How can I prevent IE8 from making content inside this div also transparent? It should be 100% visible and not transparent. Thanks so much for suggestions.
Fiddle (to be watched at in IE8)
.mybox {
position: absolute;
top: 362px;
left: 0;
width: 460px;
height:94px;
overflow: hidden;
text-align: left;
padding-left: 10px;
padding-top: 3px;
overflow:hidden;
background-color:#000000;
/* background: transparent; */
-ms-filter: "alpha(opacity=60)";
/* zoom:1 ; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; */
/*filter: alpha(opacity=60);*/
}
OT: Ok I know this is kind of old school. But still my customer wants this page to be compatible with IE8.
Related resources:
2
3
4

Opacity in inherited to all children, by design. New browsers can use alpha-channel (RGBA) to get around this, IE8 cannot.
All you can really do is use absolute-positioning to place the content you want visible over-top of the transparent bits. You of course need to rearrange the element stacking order to do this.
You can cheat by making a copy of the contents, minus the transparent element, and placing it over top of the existing element using JS.

If the div has the class called .mybox then try and definitively set the opacity perhaps by adding opacity: 1;

Finally, I found an even better solution:
.mybox {
background:none transparent scroll repeat 0 0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#98000000,endColorStr=#98000000);
}
UPDATED: Take a look with IE8
I obviously messed up something with the filter declaration, I am sorry about that... :(

Related

Is it possible to use iOS7-like blur effect only on the background?

I've been trying to add blur effect like seen in iOS7 control center, with the following code, which comes from the accepted answer of this question.
body {
-webkit-filter: blur(20px);
opacity: 0.4;
}
However, when I wrote the above snippet and ran the app, it displays the blur effect all over the screen, and hence the contents there are not readable. However, the example below only affects the background properly, since I override the blog contents' background-color
body {
background-color: red;
}
.blog {
background-color: white;
}
That being said, if I attempt to take the same approach with the following code, which should override the background:
.blog {
-webkit-filter: blur(0px);
opacity: 1.0;
}
It still blurs all over the window. So why does such discord occur?
I would like to affect the blur only on the background - in other words, I don't want it to make an influence on something like a header, footer, blog post, aside section's contents (like blog tag categories), advertisement, etc...
I use HTML 5 and CSS 3 with Chrome browser and Stylus and Bootstrap 3.
[Update]
I wouldn't like to use an additional background image - just want to make the background be blur.
There are a few ways you can do this, but they will all involve the same basic steps.
Since the blur effect acts on the entire element, not just the background, you need a dedicated element that will contain the background and the effect applied to it. Then you just overlay the rest of the content over it.
Here is my attempt: http://jsfiddle.net/83aBP/
.background {
height: 100%;
width: 100%;
background: url(http://i.imgur.com/Zz5bPNl.png);
background-size: cover;
position: fixed;
-webkit-filter: blur(20px);
opacity: 0.8;
}
.content {
position: relative;
color: white;
z-index: 10;
}
Keep the background in a separate container than the body like this:
<div id="background"></div>
<div id="body"></div>
Then you can achieve the iOS 7 parallax effect by applying the following filter to the background:
#background {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}
#body {
color: #fff;
position: relative;
z-index: 100;
margin:0;
padding:0;
}
I have used this jQuery plugin in the past and it has worked quite well: http://blurjs.com/ It sounds like it is exactly what you are looking for. This is the only method I have found to blur the content behind the background.
If this isn't what you are looking for let me know and I will find a suitable solution.

Add opacity to background image

I have set background color and background image for a div. How can I add the opacity to background image so that the background color become visible too?
Here's my code:
CSS:
.box{
background-color: green;
background-image: url('http://farm8.staticflickr.com/7308/12305815623_3d1614042a_n.jpg');
background-repeat: no-repeat;
font-size: 40px;
width: 320px;
height: 200px;
}
HTML:
<div class="box">
<div class="wrap">Some text</div>
</div>
Demo:
http://jsfiddle.net/Yv6T3/
I would suggest a partially transparent PNG is the best solution. It doesn't require any hacks, works on all platforms and degrades nicely even on IE6
There's a several CSS properties for adding opacity:
opacity: 0.2; /* Standard property, for all modern browsers */
filter: alpha(opacity=20); /* For old IE */
Look at the updated fiddle: http://jsfiddle.net/Yv6T3/1/
have been asked already and the answer is pretty nice: How do I give text or an image a transparent background using CSS?
just use
background-color:rgba(255,0,0,0.5);
where 0.5 is your transparency.
Of course, doesn't work everywhere, but for sure does in all modern browsers.

Apply opacity to an element in CSS

I have a div element named signup-box and I want to have an opacity value of 0.65 applied to it, But there appears to be a side affect to doing so. For some reason it is getting applied to everything within that div as well. For instance, my white text wont show up white and also the inputs aren't white. What can I do to keep the transparent effect without losing the design aspects I want to keep? http://jsfiddle.net/HKy3F/5/
This is the behavior of the opacity property (it applies to everything in that element). If you only want to apply the opacity to the background only, then you'll need to either create an image with a 65% transparent black box, or you can use the CSS3 colors RGBA function to generate the color black at 65% opacity (doesn't work with IE < 9).
background: rgba(0, 0, 0, 0.6);
Which produces this jdFiddle. Hope that's what you were looking for.
check this out , that should answer you question , use background rgba instead of opacity on your box.
http://jsfiddle.net/camus/Xb5TU/
#signup-box {
height: 330px;
width: 350px;
background-color: rgba(0,0,0,0.65);
border-radius: 8px;
}
An easy way would be to create a small png file with the transparency you need and set it as background of the parent element. This will be good for all browsers :)
Have you tried using 2 divs - one for the background and one for the content?
In my example, I have a the background color #ffffff at 65% opacity.
Here is the CSS:
body { background:#000000 ;
margin:auto ;
padding:15px ;
}
#divA { background:#ffffff ; /* this is your background */
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
/* IE 5-7 */
filter: alpha(opacity=65);
/* Netscape */
-moz-opacity: 0.65;
/* Safari 1.x */
-khtml-opacity: 0.65;
/* Good browsers */
opacity: 0.65;
display:block ;
width:300px ;
height:300px ;
margin:auto ;
z-index:1 ;
}
#divB { display:block ; /* this is where your content goes */
padding:20px ;
width:250px ;
height:260px ;
text-align:center ;
color:#C00 ;
font-family:Arial, Helvetica, sans-serif ;
font-size:24px ;
text-align:center ;
margin:auto ;
z-index:5000 ;
}
and here is the HTML that implements it:
‹div id="divA"›
‹div id="divB"›text goes here‹/div›
‹/div›
It works in IE7, IE8, IE9, FF, Opera, Safari, and Chrome
Good luck!
Cynthia

Problems with transparency in CSS

Ok so heres the deal. I have a page I'm creating in html and css. I've got a div whose background needs to be transparent.
However when I use opacity: .6; Everything in the div goes see through.
Is there any way to fix this so it works in safari, IE, and firefox?
No, there's no real way to fix this problem (though you can in CSS3). There are two possible approaches:
1) Use a transparent png background rather than doing it with CSS (with hacks for IE6 which doesn't allow transparent pngs)
2) Use two separate divs, and use absolute positioning to position one over the top of the other. This requires knowing certain dimensions, so may not always apply, but may work in your situation.
.outer {
position: relative
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000; /* Or whatever */
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}
<div class="outer">
<div class="background"></div>
Content
</div>
Note that sometimes the height: 100% rule for .background doesn't work in IE 6, in which case you should try applying hasLayout to first .outer, and if that fails to .background as well (you can add hasLayout with the CSS rule zoom: 1 without side-effect). If neither of those works, you'll likely need an expression value for IE 6. If you need further help leave a comment.
As smerriman said, it's much simpler in browsers which support CSS3 (more specifically, rgba or hsla color values). It would be as simple as background-color: rgba(0, 0, 0, 0.6).
Just use transparent image as a background for that element. When you use opacity in css for a given element, everything in that element and including that element receives that styling. Look here:
http://jsfiddle.net/zV4BR/
you should use both
opacity in css and
filter:alpha(opacity=60);
for ie and stuff
use this method
How to give cross browser transparency to element's background only?
use Rgba instead opacity. see example here: http://jsfiddle.net/ypaTH/
you will have to set background on inner elements also.
Edit: to make rgab code for IE use this http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
it should be
opacity:0.6
beside that opacity works differently depending which web browser you use

How to make a transparent background without background image?

I would like a div to have a transparent background.
I tried to do this using background-color and opacity, but the problem is that the border and the text inside become also transparent. Example here.
Is this possible to achieve this without using transparent PNG background image ?
If you just want the color of the background to be transparent and not the child content, use
background-color: rgba(0,0,0,.5); // Sets to 50% transparent
See this page for more details - it's a css3 spec so won't show up in every browser:
http://www.css3.info/introduction-opacity-rgba/
Yes.
Set
background-color: transparent;
and do not use opacity, as that is what makes semi-transparent the whole div..
updated your example at http://jsfiddle.net/eU7By/1/
UPDATE after comments
you can use rgba for the background-color as #DHuntrods mentions. IE needs some tweaking of'course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/
The most cross-browser solution is to use the opacity property on an additional "absolutely positioned" child element (in a relatively or absolutely positioned parent): it only there to contain the colored transparent background.
Then you can use the opacity property to make this element transparent. Since this element has no children, the opacity will not affect any other element.
Opacity is an IE5+ property, just use (see http://css-tricks.com/snippets/css/cross-browser-opacity/):
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
see the jsFiddle example http://jsfiddle.net/DUjzX/1/
The whole code looks like:
The HTML:
<div class="my-cool-wrapper">
<div class="text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
<div class="transparent-background">
</div>
</div>
The CSS:
.my-cool-wrapper {
position: relative;
}
.my-cool-wrapper .text-and-images-on-top {
padding: 10px 15px 19px 15px;
z-index: 1;
position: relative; /* needed to enable the z-index */
}
.my-cool-wrapper .transparent-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE 8 */
filter: alpha(opacity=10); /* IE 5-7 */
-moz-opacity: 0.1; /* Netscape */
-khtml-opacity: 0.1; /* Safari 1.x */
opacity: 0.1; /* Good browsers */
background-color: blue;
}
read more:
Set opacity of background image without affecting child elements
Screenshots proofs
ps: I did not add the screenshots for Chrome, Firefox & Safari since these are much "better" browsers... trust me, it works for them too.
I had to use a 30x30 transparent gif as a background.
background:url('absolute path here');
A very simple CSS method to have a clear transparent background in html is this code.
background: rgba(0, 0, 0, 0.6)!important;