|
CSS - Css Alpha Filter / Opacity Question
I'm working on a site that's a single php page with CSS file.
The site uses the same rotating image script, in 2 locations. In the one location, it rotates the background image of a div. I've set the opacity to 0.7, alpha filter at 70. This is working properly - it is affecting the opacity of the background image as I want. The problem is that it is also affecting the opacity of static images that are contained within that same div. Any ideas on how I can keep the opacity of the rotating background image, without affecting the opacity of the static images that are on top of the background? Site is triple-w . visitchester . ca Relevant code he FROM INDEX.PHP (IT'S THE JPG'S IN THE BIZCARDS FOLDER THAT I WANT TO BE SOLID) <div id="rotator2" style="background-image:url(link to rotate2.php); opacity:0.7; filter:alpha(opacity=70); padding-top:20px;"> <a href="link here" target="_blank"><img src="bizcards/mecklenburghinn.jpg" height="170" width="207" style="border:#FFF; margin-left:5px; border-style:double;" /></a> <a href="link here" target="_blank"><img src="bizcards/ropeloft.jpg" height="170" width="207" style="border:#FFF;border-style:double; " /> <img src="bizcards/banner3.jpg" height="170" width="207" style="border:#FFF;border-style:double;" /> <img src="bizcards/banner4.jpg" height="170" width="207" style="border:#FFF;border-style:double;" /> </div> FROM MAIN.CSS: #rotator2 { width: 900px; height: 655px; font-family:"Courier New", Courier, monospace; font-size:16px; color:#FFF; } Thanks in Advance! Regards, ChesterNerd Similar TutorialsI have a problem involving the ie only filter alpha(). My problem is that any <div> that is nested inside another becomes clipped, see example: Code: <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#inBusinessHolder {
position: relative;
}
div.inBusinessBox {
display: block;
filter: alpha(opacity=80);
position: absolute;
width: 250px;
height: 80px;
border: 1px solid black;
background: #cff;
}
</style>
</head>
<body>
<div id="inBusinessHolder">
<div class="inBusinessBox" style="top:70px;left:100px;">text</div>
<div class="inBusinessBox" style="top:140px;left:110px;">text</div>
<div class="inBusinessBox" style="top:210px;left:120px;">
text
<div class="inBusinessBox" style="top:10px;left:-10px;background:#cf6 z-index:1000">text</div>
</div>
</div>
</body>
</html>
Anyone got any ideas? It's like the parent container is behaving like a clipping rectangle! Is there Opera compatible code for filter:alpha or -moz-opacity? hi | i'm setting alphas and this code: filter:alpha(opacity=50); is working fine on: IE on a PC IE on a MC Mozilla on a PC Mozilla on a MAC but it doesn't work on: FireFox on a MAC Safari on a MAC is the filter tag not supported by these 2 browsers? anyone have any suggestions? any help is greatly appreciated. thanks. fu-meng. I have an image link which I want to display at 50% opacity and when the user hovers over it I want it to be 100%. My code doesnt seem to be working tho? Please could someone help me... <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .fadein { } a.fadein { filter: alpha(opacity=50); } a.fadein:link { filter: alpha(opacity=50); } a.fadein:hover { filter: alpha(opacity=100); } --> </style> <head> </head> <body> <a href="gfdg.html" class="fadein"><img src="First.gif" width="257" height="130" border="0"></a> </body> </html> hello, i have a problem with aplha opacity filter in IE6. My div looks like this <div style='width:0%;height:0%;background-color:white;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;color: blue;' >" + label + "</div>"; This works well and good i have one more div prior to this and I want to display both of them in line. For that when I apply position:relative;display:inline; The opacity filter is not showing any effect. any help would be appreciated... Thanks, Robust I have an image background in the body, and I like having the content have 85% opacity in this instance, but I don't want the images to be at all transparent. How can I fix this? I tried giving the images individual opacity values, and I thought it would work because the opacity was set in the content div, which was lower down on the CSS page than the img divs. You can check out the page here. I'm currently having a problem getting the opacity to work. I haven't tried using RGBa yet, but it should work the same as HSLa, and right now HSLa isn't working properly. Usually when I've had a problem, it's just a matter of moving the file around in my finder(I use a Macbook) or I've missed a semi-colon or quotation mark or something.....but with this, I swear I've checked, double-checked, triple-checked everything and it's not working. And I've checked it in Safari, Chrome, and Firefox. Right now I have the Alpha element in the HSLa set to .25, which means it should be quite transparent...but all it does is make the color lighter, not transparent. If I could somehow send someone my files/images and screenshots for you to try and help, that'd be great. Otherwise I'm not sure how to go about getting help. Thanks! Hi, I have a div which is somewhat transparent. There is no problem there. Then I have textin this div, which is also showing up with transparency, and this is the problem. I need the text to be 100% opaque. Here's the div css: Code: .rounded_STYLE
{
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
width: 224px;
background-color: #616161; /* if needed */
/* border: 1px solid BORDER_COLOR; */ /* if needed */
-webkit-border-radius: 4px; /* for Safari */
-moz-border-radius: 4px; /* for Firefox */
}
Here's the text css: Code: .bodywhite{
margin:0px, 4px, 4px, 4px;
opacity:1;
font-size:10px;
color:#FFFFFF;
font-weight:normal;
}
I've tried different numbers in the opacity value, but to no avail. Here's the site:site any ideas? thanks Ok, I am creating an image gallery that is composed of a square layer that has opacity of 50. I have created 9 other div layers within that layer to hold thumbnails. When I put images in those thumbnail divs, the image shows up as semi-transparent. I do not want this. Here is my code, how can I turn off opacity just in those div thumbnail squares? CSS Code:
DIV.outer
{
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 488px;
border:2px solid white;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
}
DIV.inner
{
position:absolute;
left: 50%;
top :50%;
width: 500px;
height: 488px;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
background-color:#CC6666;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
div.tn
{
position:absolute;
width:115px;
height:115px;
background-color: #660000;
layer-background-color: #660000;
border: 1px none #000000;
}
HTML Code:
<div class="outer">
<p> </p>
<div class="inner">
<!--row 1!-->
<div class="tn" style="z-index:2; left: 50px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<!--row 2!-->
<div class="tn" style="z-index:2; left: 50px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<!--row 3!-->
<div class="tn" style="z-index:2; left: 50px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
</div>
</div>
What i'm trying to get at here is how do I get non transparent items in a transparent div box? Hiya, been playing around with trans PNGs and appreciate Firefox more and more with each passing hour!! What's the best way to get PNGs with alpha channel transparency to work in IE6, so far I've tried the .htc script mehod which works OK, except, on my PC it asks if I want to execute the script each time I open or refresh the page. Don't know if it would do this on my web server and haven't tried it yet. Is there another equally straight forward way to deal with this? I thought about browser sniffing and then giving IE6 a nasty transparent GIF and everything else a PNG. What does everyone else think? John. Well, I have a couple png images that are using a transparent background. As most of you probably know, it looks great in every browser except IE for the PC. It looks like complete *** in that browser. Now I looked all over the net for a fix for this and found this in Microsoft's library of fixes for their products and found the AlphaImageLoader. Tried using their own code and the same code I found on a dozen other sites and it still isn't loading the transparency, so I'm just curious what I am doing wrong. Here is the code: Image HTML Code: <div id = "welcome_image"> <img src = "/testing/inertia/images/home/welcome.png" alt = "Welcome" /> </div> Image CSS Code:
#welcome_image
{
position: absolute;
top: 10px;
left: 10px;
width: 168px;
height: 216px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/testing/inertia/images/home/welcome.png", sizingMethod="scale");
}
is there any way to have the background of a table be at 50% opacity and the text be at 100% opacity? i've been playing with this code: style="filter:Alpha(Opacity=xx)" ...where xx is 50 or 100 and have placed it within the <table> tag and also within a <font> tag, but nothing seems to work. the font wants to be the same opacity as the table. is there any way around this? on a possible workaround, i've tried using semi-transparent PNG file as the background of the table, and that didn't work. i couldn't get the PNG file to do semi-transparent. it wanted to do a diffusion transparency, which looked like @ss. Hello, im new to this forum ( A pleasure to meet everyone! ) I was browsing through the forum and could not find exactly what my problem is. I am trying to make a filter for my CSS code with the dropshadow effect on text. Eg: .content { color: White; text-align:justify; line-height:12px; font-family:tahoma,arial narrow,arial; font-size:9px; Filter: Alpha(Opacity=70) DropShadow(Color=#8F5A3A, OffX=1, OffY=1, Positive=1); } The problem is its just not working Its hard for me to get the colors correct to begin with because of the BG the text is on. But If I could get the Alpha(Opacity) to work with the DropShadow the text will be significantly more visible and would work fine. Any suggestions? or Solutions? Keep in mind im NOT very knowledgable in a lot of new things yet Help much appreciated- Thanks a lot! If I set a height for my LIs, then IE does not increment the list item. It shows a. a. a. a. instead of a. b. c. d. Actually it's the same for any list-style-type. It never increments the list-type, even when it's just the default style. I couldn't find any other mention of this anywhere. Does anybody know what causes this bug, or if there's a way to fix it? Here is some code to reproduce: Code:
/* CSS */
#qform ol {
list-style-type:lower-alpha;
}
#qform ol li {
color:#333;
height:25px;
margin:10px 0;
padding:0 0 0 20px;
}
#qform ol li input {
margin:3px 5px 0 0;
}
#qform ol li label {
margin:0;
}
<!-- HTML -->
<form id="qform" action="index.php" method="post">
<fieldset>
<ol>
<li>
<input type="radio" id="rada" name="answer" value="a" /><label for="rada">Once</label>
</li>
<li>
<input type="radio" id="radb" name="answer" value="b" /><label for="radb">Twice</label>
</li>
<li>
<input type="radio" id="radc" name="answer" value="c" /><label for="radc">Three Times</label>
</li>
<li>
<input type="radio" id="radd" name="answer" value="d" /><label for="radd">A Lady</label>
</li>
</ol>
<input type="submit" value="OK" />
</fieldset>
</form>
In IE6, that will display a list with a, a, a, a. Remove the height from #qform ol li and it works as it should. Thanks, I'm sure this can be fixed... But I'm not sure how! I was doing the final adjustments and cross-browser tweaking when I stumbled upon this issue... I'm using a CSS with the following background tag: Quote: background: #E8E9EA url(img/test.png) repeat-x 0 8px; My PNG is 32bits, and of course, this works OK in Firefox, etc.. But not in MSIE! ( tested under 6.0.2900.x ) - Instead of correctly blending the PNG with the table background, it displays full white rects as backgrounds. I tried a few ms-ie "holy" fix scripts, etc. None of them worked on this special case. Any ideas?. I wouldn't like to work-around this one... Thanks. Is it possible to overlay a colour onto a grayscale image to make it that colour with css? Such as using the alpha channel? Image in question would be a transparent background gif file. Can someone explain me how to set on a photo-background ( opacity 100% 640x480 ) a square of 320x320 as size and opacity @ 25% and on that square i have to put some text that is at 100% opacity. The problem is that when i set 100% opacity for the text... it gives me 100% of the 20% opacity... i need to get the full 100% of 100% opacity... can someone explain me ? And another question... how can i set an opacity for Opera Browsers ? I was wondering if anyone knows a way to have use Opacity witin a div tab but then have another div tag in side of it not affected by Opactiy. Here is the code i have I want background to be transparent but not transbox. But setting the opacity to 100 in transbox wont over ride background.: Code:
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background-color: 000000;
border: 2px solid black;
opacity:0.6;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.100;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
i cant get IE to render opacity correctly. filter: alpha(opacity=50); opacity: .5; i know the filter is for Firefox and the opacity is for IE. but it doesnt seem to work. any ideas? I have a weird problem. I've applied opacity in my stylesheet for a few elements. My opacity is working fine in FF, but not in IE. Here's the code I have: filter: alpha(opacity=75); -moz-opacity:0.75; opacity:.75; I've also applied it inline as well as in the stylesheet. Page is located at: ebonyevans.coastaldistribution.com/index.php The top center and top left music player should be opaque. Anyoen see what I'm doing wrong? |
|||||||