div overlay background - html

In my application am using transparent div like a show modal dialog.Its working fine in firefox but not working well in internet explorer.
What is the solution to work similar in both
Thanks

IE6 needs to set an alpha-filter for transparency:
.transparent {
opacity: 0.5;
filter: alpha(opacity = 50); /* Needed for IE6 */
}
I would recommend to have the filter rule in a separate stylesheet for good measure.

Related

internet explorer not anti aliasing rotated image

I have a div with a background image that I am rotating. Below is my css rules to rotate it:
#services_parallax {
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
}
The problem is in IE the edges of the image are very blocky and jagged instead of being smooth lines and don't appear to be antialiased. Does anyone know a fix for this? It was doing it in chrome until I applied the fix for it by applying -webkit-backface-visibility: hidden; which worked great for chrome, I just need a similar fix for IE if one exists.
To replicate this issue paste the following into an HTML file and look at it in IE:
<style type="text/css">
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center;
background-size:100% auto;
height:100px;
width:700px;
margin-top:50px;
margin-left:50px;
}
</style>
<div id="services_parallax"></div>
Anti-aliasing don't work on large images if there are height and width forced with CSS (IE11, 10 and 9). I've make some (very) approximate tests and I deduct anti-aliasing works under 1000px.
I'm still looking for an official source for this issue.
#geoffs3310, I feel your pain.
I have found this is still an issue with IE11, and some other browsers (Safari on iPad and on Chrome and the default browser on Samsung Galaxy Tab A). To work around this I whacked a dark background-color on the element containing the background-image. I don't know why, but it appears to do the trick, e.g.
background-color: black;
And in case anyone else reads this post, allow me to put forward a few other fixes I found in dealing with the various issues arising from skewing content. Note, these are all applied to the transformed container element.
Eliminates the jagginess buttons get after skew rotations are applied (kudos):
transform-style: preserve-3d;
Eliminate blurry where <canvas> has been used (kudos to Zoltan). Note, if there are other transforms on the element declare them on separate lines rather than shorthand (from memory this was to work around a similar Safari issue):
transform: perspective(0);
And another fix—though my documentation lacks what it fixes, I think it was to do with janky or blurry content in IE—try:
outline: 1px solid transparent;
To get round this issue i used box shadows which seemed to work and make the edges smooth

Light up image on hover

Take a look at http://www.kickstarter.com.
When you hover over their logo, the image lights up. Is this effect doable without using a different image on hover?
My first idea was to use ::after:hover and add a white square with high transparency that covers the logo, but since my logo is placed on a blue background this would not work. Another idea is to set opacity to 0.9 and on hover set it to 1. But this makes the image look too dark by default.
You may be able to use the css image filters, like this:
img:hover {-webkit-filter: brightness(150%); }
This sometimes looks funny and will only work in webkit browsers, but it's the best solution I could think of. It'll allow you to keep your blue background as well.
Here's a jsfiddle showing the Kickstarter logo on a blue background.
http://jsfiddle.net/62bCB/
Cheers,
As far as I am aware you can't do what you require with pure CSS at this point, due to the blue background. I think your best bet is edit the image in photoshop to be its :hover brightness, and then use something like:
img {
opacity: 0.7;
}
img:hover {
opacity: 1;
}
Changing the opacity on hover will work:
img:hover {
opacity: 0.5;
}
Fiddle
The original CSS has:
img:hover {
filter: alpha(opacity=80);
opacity: .8;
}
Fiddle: http://jsfiddle.net/praveenscience/hfUpk/
You have a few choices depending on what browsers you need to support. You could make the logo a background image and then change the image on hover. (or sprite the image so that you don't get a flicker)
Or you could try a combination of CSS opacity and microsoft filters for older versions of IE.
http://www.w3schools.com/cssref/css3_pr_opacity.asp
Since you mention you have a dark background you can try some of the new CSS filters (saturation, brightness etc) but you're out of luck for IE.
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
You could use this CSS code which makes lighting up a smoother transition than just instantly bright. Techpp.com and Techlivewire.com also use this same css or one similar to it on their frontpage featured sections. I could not get CSS to post on here since stackoverflow kept giving me errors so I put it in a pastie. http://paste2.org/1L9H2XsF
you can use opacity value between 0.1 to 1
very light and 1 value is dark (default)
img {
filter: alpha(opacity=100);
opacity: 1;
}
img:hover {
filter: alpha(opacity=70);
opacity: 0.7;
}

How to solve CSS background transparency?

all
As you can see in images i have gradient background (this is responsive layout) and i want to display testimonials on that.
the problem is, i want the transparent bg.
i have tried to use this
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
but its shows something like this is not my solution
How can i set testimonials bg same as in my web site bg.
Can semi transparent png can sole this or any other way to solve it ?
thanks in advance...
Try using rgba as a background. This gives you the option of background opacity. Here's a little calculator I use all the time to get hex to rgba http://hex2rgba.devoth.com/.
I'm not quite sure if I understand the question, but that's what you can use if you want semi-transparency. For full transparency, just use background: transparent. And it should work.
EDIT: I believe I understand the question more now. The reason that you were getting the result, is because you were setting the entire element to be at opacity 0.5, not just the background. If you use rgba like i suggested, you can set the background to be semi-transparent like this
background: rgba(238, 238, 238, 0.5);
try this one
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
or something like this
.transeffect {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

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;