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;
}
Related
I am having a bug I don't understand at all and that I can't find an solution for on the web.
My setup is pretty simple: I'm having a container with various children. The container (marked red in the screenshot) has a fixed height and overflow-y auto. Scrolling works just as expected.
.card-details-container {
height: 500px;
overflow-y: auto;
}
But when I change the opacity of one of the contained children, it is suddenly broken:
.barchart .barchart-bars div {
opacity: .5;
}
I am only experiencing this bug in Chrome (41.0.2272.118). I have no idea why this would be happening. Any help is appreciated!
Try:
/* 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;
Also, check the borders.
I can able to get this functionality in Firefox and chrome. but below code, text is displaying in IE. that text should not display.
<a target="_blank" href="#">edit</a>
<style>
a {
background: url("../images/edit1.gif") no-repeat scroll 0 0 transparent;
color: transparent !important;
}
</style>
Mostly IE 5-8 does not support the transparency property. But IE 9 will support it.
While searching for my blog i found the following method
.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;
}
And
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
I referred this in Blog 1 and Blog 2
why won't this gradient filter work in internet explorer 8?? i am led to believe that it is supported from ie6+
filter:progid:DXImageTransform.Microsoft.gradient(starColorstr='#ccc',endColorstr='#fefefe',GradientType=0);
Please always use <!doctype html> to bring IE into (almost)-standards-mode
#ccc does not, what you expect;) Always use #RRGGBB, IE cant handle the shorhand.
Several filters in one ruleblock are not allowed. Your opacity-filter overrides the gradient filter.
Solution for filter:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e6cccccc",endColorstr="#e6fefefe",GradientType=0); with the first two digits being the opacity (range 255, from 00 to ff, so you need to rescale your 90% opacity accordingly -> E6)
Gradients and opacity are not supported by IE8.
IE has always been a nightmare for me too (and probably every developer here)
You have no doctype in your excample.
IE8 might require XHTML 1.0 Transitional as the Doctype to make margin:auto work as expected.
Using the following in your CSS to set opacity should render correctly:
/* 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;
I tested it and it works in IE7, IE8, IE9, FF, NS, Chrome, Opera, and Safari
For the centering of the div in IE8 (I assume that's what you want the margin:auto for) add this:
text-align:center;
For your gradient try this:
background: #008800; /* fallback for (Opera) */
background: -moz-linear-gradient(top, #CCC, #fefefe); /* Mozilla: */
background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#fefefe)); /* Chrome, Safari:*/
filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#CCC', EndColorStr='#fefefe', GradientType=0); /* MSIE */
Hope it works for you!
Best,
Cynthia
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;
I've to make the background of my fading-in menu items semi-transparent.
It has to be grey but still I need to see what's below it.
What's an easy cross-browser solution for semi-transparency ? (Possibly without using images)
thanks
selector {
filter: alpha(opacity=50); /* internet explorer /
-khtml-opacity: 0.5; / khtml, old safari /
-moz-opacity: 0.5; / mozilla, netscape /
opacity: 0.5; / fx, safari, opera */
}
http://perishablepress.com/press/2009/01/27/cross-browser-transparency-via-css/
CSS Transparency Settings for All Browsers
http://css-tricks.com/css-transparency-settings-for-all-broswers/