|
CSS - Css Transparency Issues.
I'm trying to set up a new layout for my game. The way I want it set up is with a seamless background covering the entire player's screen, and the rest of the game (Tables, mostly). I want that part of the game to be semi-transparent, something like 80 or 85% opacity.
I am rather inexperienced with CSS, so any help is appreciated. Would it be useful for me to paste the css code I have right now? Similar TutorialsI have a block of html that is something like this: Code: <li id="captionFrame"><div class="caption"><h3>test</h3><p>test</p></div></li> The opacity of #captionFrame is set to 0.7; Code: #captionFrame{ background-color: #111; opacity : 0.7; }
This works well in making the frame translucent, the issues is that, the text also become transparent. I've tried to resolve this by setting up the .caption class to have an opacity of 1.0 Code: div.caption { opacity: 1.0; }
but this doesn't have any affect. Anyone know any tips for handling this issue? Ok I am new to CSS. It's a little confusing. But um, what I want to do is create a table with a embossed border and semi-transparent background. I've been told by my teacher that it can't be done but he's never tried or messed around that much with CSS. So I came here. and also what a div span blockquote select input those are all codes I've come across. So if you can please help me. I've also looked around and seen codes but I don't know how to input them... well I mean where. I have come across this: .background { filter:alpha (opacity=50);} I don't know if that would work. Thank you for your help. FLY Hey guys, I have a myspace layout.. and what I cannot figure out is how to get it to not be transparent!? http://www.myspace.com/thegoatherder13 I want the boxes to be plain red or something without that queer transparent look on it. Here is the template code. Code: <embed allowScriptAccess="never"src="http://home.comcast.net/~thegoatherder13/scenicroute.mp3" autostart="true" loop="true"
width="2" height="0">
</embed>
<style type="text/css">
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-image:url('http://mi4.bpcdn.us/atrucreation8/bg_bos_tile.gif');
border-color:CC2222;
border-width:5px ;
border-style: solid;
scrollbar-face-color:0d2b56;
scrollbar-highlight-color:0d2b56;
scrollbar-3dlight-color:0d2b56;
scrollbar-shadow-color:0d2b56;
scrollbar-darkshadow-color:0d2b56;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color:bf141a;
}
table table { border: 0px }
table table table table{border:0px}
table table table {
border-style:solid;
border-width:3px;
border-color:FFFFFF;
background-color:transparent;
}
table table table td {
background-color:bf141a;
filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -khtml-opacity:0.70; }
table table table table td {filter:none;}
table, tr, td, li, p, div { font-family:helvetica; color:FFFFFF; font-size:12px; }
.btext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.blacktext10 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.blacktext12 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.lightbluetext8 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.orangetext15 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.redtext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.redbtext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.text { font-family:helvetica; color:FFFFFF; font-size:12px; font-weight:bold; }
.whitetext12 { font-family:helvetica; color:FFFFFF; font-size:12px; font-weight:bold; }
a:active, a:visited, a:link { font-family:helvetica; color:EEEEEE; font-size:12px; }
a:hover { font-family:helvetica; color:AAAAAA; font-size:12px; }
a.navbar:active, a.navbar:visited, a.navbar:link { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.navbar:hover { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.redlink:active, a.redlink:visited, a.redlink:link { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.redlink:hover { font-family:helvetica; color:FFFFFF; font-size:12px; }
.nametext { font-family:helvetica; color:FFFFFF; font-size:12px; }
</style>
</style>
<style type="text/css">
.contactTable {
width:300px !important; height:150px !important; padding:0px !important;
background-image:url(http://mi4.bpcdn.us/atrucreation8/redsoxct.jpg);
background-attachment:scroll; background-position:center center;
background-repeat:no-repeat; background-color:transparent;}
.contactTable table, table.contactTable td { padding:0px !important;
border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>
<style type="text/css">
table table table td {vertical-align:top ! important;}
span.blacktext12 {
visibility:visible !important;
background-color:transparent;
background-image:url("http://mi4.bpcdn.us/atrucreation8/redsoxtop.jpg");
background-repeat:no-repeat;
background-position:center center;
font-size:0px; letter-spacing:-0.5px;
width:435px; height:75px; display:block !important; }
span.blacktext12 img {display:none;}
</style><br><br>
Hi, I would like to have al my boxes and td's, tr's, table's and other frames transparant. Can i do this with CSS only? You can view my site @ URL , the penguin has to be full seen! With a friendly greet, Dieter Van Houtte Code: Ok, I have tried many many sites. they have each told me to do something different or where to write it in. except for one or two common things:
filter: alpha (opacity=50)
-moz-opacity= .5
opacity= .5
thats about it. i've been told to use style, id's, and class. its extremely confusing. also a lot of people say to use CSS but then some are saying its possible with html. but neway i've tried it doesnt work! can someone help. I am gonna be posting my html and css codes.
#1:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Lakewood YMCA Dance Program and Booster</title>
<!-- TemplateEndEditable --><style type="text/css">
<!--
@import url(../mel/semitransparent.css);
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<br>
<table width="1170" height="809" border="0">
<tr>
<th height="174" colspan="2" scope="row"><img src="../mel/logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
</tr>
<tr>
<th width="296" height="37" scope="row">commentary</th>
<td width="864" rowspan="3"> </td>
</tr>
<tr>
<th height="352" scope="row">Here is where I will write all the little comments and blurbs about what we are about and what we do. also what we value and support</th>
</tr>
<tr>
<th height="181" scope="row">This is where we will post New events for everyone. we will also post if we won any competitions. </th>
</tr>
<tr>
<th height="53" scope="row">This is a I dont know space </th>
<td>this is where it will say who designed this, when, when updated, and who our host is. </td>
</tr>
</table>
<p><br>
<br>
<map name="booster" id="booster">
<area shape="rect" coords="126,87,249,107" href="../mel/boosterclub.htm">
<area shape="poly" coords="75,49" href="#">
<area shape="rect" coords="345,82,499,108" href="../mel/Danceprogram.htm">
<area shape="rect" coords="588,87,711,106" href="../mel/dancecamp.htm">
<area shape="rect" coords="783,84,971,107" href="../mel/fly.htm">
</map>
</p>
</body>
</html>
#2:
table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000;
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color:
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}
#3:
tbody {background-color:#FF6971;
width: 300px;
margin: 0 50px;
border: 2px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
#transbox {
width: 300px;
margin: 0 50px;
background-color: #CF0000;
border: 2px solid;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#bg {
width: 400px;
height: 300px;
background: url(redbg.jpg);
background-repeat: repeat;
border: 0;
}
#transbox div {
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
position: relative;
visibility: hidden;
}
These are all just some of the stuff I've had to go through.
here are some sites too:
http://www.quirksmode.org/index.html?/css/opacity.html
http://www.mandarindesign.com/opacity.html
http://www.domedia.org/oveklykken/css-transparency.php
I'm going crazy! :confused: plz help!! ><
Hi there people. Is there ANY code or ANY way around making an CSS image have a transparency layer ontop, and then Font ontop of the transparency (but the font isnt included with the transparency layer) ? As it works fine in IE but not FF. Its driving me mad! lol Hey everyone, I'm relatively new to CSS and I was hoping to incorporate some transparency effects onto my webpage. What I'm looking at is basically having opaque text over a div with a partially transparent background. When you take out the unnecessary stuff this is basically what it boils down to: Code: <div style="opacity: 0.5;background: #FF0000;"> <span style="opacity: 1;">opaque text on a translucent background</span> </div> The problem is when I open this is Firefox (version 2.0.0.1) I end up getting the 50% transparent red background but the text as well is 50% transparent...does anyone know what's wrong with this? Hi folks, new to the forums, having a problem that I've never encountered (mostly because I shy away from using transparency in the first place). A client gave me a website that was based on a template. Basically, #sitename is a div at the top of the page and i placed a transparent.png as a logo in the top. displays fine in firefox, in ie it has a solid color where the transparency should be. I researched and found a hack, which you can see in my code: Code: #sitename{
background:url(img/headernew.png) top center no-repeat;
font-weight:400;
height:130px;
margin:0 20px 10px 0;
text-align:center;
*background:none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/headernew.png',sizingMethod=scale);
}
however, it stretches the image and makes it all mis-sized. Is there any way to achieve transparency in a div without this hack? Hello, If you visit: http://tombraiders.net/katie/newsite/index2.shtml user: letme pass: in You'll see my main content area does not fill to the footer. Any ideas how to fix this? The CSS page is he http://tombraiders.net/katie/newsite/style.css Hello, I am in the process of re-doing a page of my site in CSS...the working page is he http://www.tombraiders.net/katie/test/index.html CSS file he http://www.tombraiders.net/katie/test/style_index.css I have the body part semi transparent so you can see through to the background a little bit. Now my problem is that the header is also transparent, which is what I don't want. Does anyone know how I can isolate the body so the header is not transparent as well? Thanks Hi, I have been trying to get this to work for a long time. It is a table with a 30% transparency fill and white text. Except the text always comes across as transparent also. Please can anyone help to make this work. Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Transparency Test</title> <style type="text/css"> .box { background-color: grey; opacity:0.3; filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity:0.3; } .text { opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; float: center; font-size: 16px; color: #ffffff; width: 100; font-style: bold; } </style> </head> <body bgcolor="black"> <table width="200"> <tr> <td class="box" align="center" > <p class="text"> Testing </p> </td> </tr> </table> </body> </html> I am having quite a time finding out if it's possible to use the AlphaImageLoader hacks on a png to make it a background image. I need this for drop shadows on a gradient page background. I have found a site that does have working png transparent backgrounds he http://thedesignspace.net/css/transparentPNG.htm For some reason, even though my code is basically the same with the image location changed, it fails to work for me, while that page does. My code can be seen at http://codymays.net/~private_ftp/theed. If you look at the source you'll see the IE specific css file. Works fine in opera/ff. Any help would be greatly appreciated. someone help me, it's driving me crazy. i have a simple navigation menu where i have a semi transparent PNG image as the original image. when the image is moused-over, it changes the image to another semi-transparent via javascript. the issue is, when i mouse-out the image, i want it to return to the original semi-transparent image. however, while it does return to the same image, it is not as transparent as it should be. [image: 50% opaque] --> (mouse over) --> [image:70% opaque] --> (mouse out) --> [should go to image: 50% opaque] it is doing it in both IE and Firefox. is there a fix for this? thanks!! This is driving me absolutely insane. I'm trying to figure out WHY this DIV isnt showing up as transparent in IE. I have a DIV with the following style applied to it: Quote: .blocktitle { text-align: center; padding: 3px; font-weight: bold; background-color: black; color: white; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } I have a table.. at the top I want a title bar thats transparent, and the content below. I need the transparency so if I change the color of the TD the titlebar still stands out and matches with the new color. Problem is.. this doesnt work in IE and I'm losing my mind Mozilla.. works awesome. IE.. the titlebar is black and not transparent at all. If I set the position to absolute it goes transparent just fine! But then the content below invades the spacing for the title bar. Here's the HTML: Quote: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: green;"> <div class="blocktitle"> Test Title </div> <div style="height: 1px; background-color: black;"><img src="/images/spacer.gif" height="1" width="1"/></div> Some content goes down here. </td> </tr> </table> Any help would be greatly appreciated. Hi folks, Heres a basic layout I created that includes a transparent PNG file with text wrapping around the image pretty well. http://agogo.dnsdojo.com/img/png_test/1.html I would like the layout to look more like this though: http://agogo.dnsdojo.com/img/png_test/indesign.png With the text wrapping around the circle. Considering the PNG file has transparency is there a way to do this with CSS. I really need some help. I need to find a good resource for some css/dhtml cross-platform horizontal drop down menus with transparency. i.e. when you mouse over the menu it drops down and is about 80% transparent) I have tried applying opacity css settings to div tags in my existing drop down menu, but to no avail. Any help is much apprciated... SBee I asked a question some time ago which was the road that led me to this point dealing with transparencies in IE. Well after fooling around with the problem for a good amount of time since then I have decided to return, present my results, and hopefully hear some fresh ideas that will draw this to a conclusion. So I do have transparencies working in IE thanks to the alpha filter hack. Transparencies obviously work in FF. the problem is bridging the gap between the two and getting my page to look and act the same in both pages. I attempted the use of javascript as shown in this tutorial: javascript tutorial the problem is this though: I swap images when there is a hover. When javascript rewrites the code like this, that no longer happens in IE. It's also not the most elegant of solutions I think. You get that second of white background as the js runs on each of the pictures. It's also going to apply this same code to all PNGs and I don't want that to happen. I feel that the solution is CSS, but I can't quite seem to get it to work. Here was another tutorial which I read through: CSS transparancy it again works for IE, however in FF I'm getting nothing. Here is my CSS: Code:
.transparent {
width:25;
height:29;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/MagButton.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.transparent[class] {
background-image:url(images/MagButton.png);
}
with this in my HTML: Code: <div class="transparent" /> two problems here. FF does not seem to be processing that [class] style as they said it would. I get nothing on the screen. the second is that I don't want to be hard coding all of my images like this, the CSS size will explode and become hard to maintain. Does anybody have any other ways of going about this that have worked for them (CSS is prefered, btu I'm open to anything) I am going to need a lot of hand holding here because I'm new to this, but I'm a patient person if you can be. Thanks. I'm using CSS to add dynamically-sized background images to my table cells. These images use PNG and transparency. This is all fine for Firefox (what I designed the site on), but doesn't work for IE. The known issue of IE not rendering PNG transparency. There are several workarounds on the internet, but they all involve image tags or straightforward backgrounds. I couldn't find anything addressing using images as cell classes. So, I'm asking if anyone can provide a solution/fix to this problem. Thanks in advance. Hi There, I am coding a design that has a semi transparent menu that uses this: Code:
#mainnav {
float: right;
background: #fafafa;
filter:alpha(opacity=65); /* IE Proprietary */
opacity: 0.65; /* CSS3 Standard */
-moz-opacity:0.65; /* Mozilla Property */
height:31px;
font-size: 1.1em;
}
When I add hover to any of the navigation items that fall within this parent div the transparency is maintained. I need the hover to be solid color, not semi transparent. Is there anyway to kill the transparency on hover? I have tried adding an 'a:hover' with the maximum opacity (0.99) to #mainnav and also independently to the child elements with no success eg: Code:
.nav-list-items a:hover {
display: table-cell;
height: 31px;
vertical-align: middle;
background-color: #ec7404;
color: #fff;
filter:alpha(opacity=99); /* IE Proprietary */
opacity: 0.99; /* CSS3 Standard */
-moz-opacity:0.99; /* Mozilla Property */
}
Any pointers would be greatly appreciated. Thank you! Hello, I have uploaded the site to the following location. Note that I hid it behind another site. All files within the folder /w/ are for this site. I have created a design which depends on content blocks having a transparency. It looks great if FF and IE 9, but I am having trouble achieving the same effect in IE 6/7/8. Strangely enough when i load the page in IE 8 the transparency is displayed but as soon as I click on the standard error message alert - allow blocked content, it becomes solid black?!@#$% an example of CSS code for: Code: #header{
position:absolute;
top:1px;
width:875px;
height:80px;
margin:0 auto;
border:none;
background:url(images2/trans.png);
opacity: 0.95;
filter: alpha(opacity=95);
padding:20px;
border:15px hidden;
zoom:1; }
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main_en.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<link href="w6.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<!-- InstanceBeginEditable name="Background" -->
<body class="bg" id="start">
<!-- InstanceEndEditable -->
<div id="container">
<div id="header">
<div id="logo"><img src="images2/logo2.gif" width="370" height="120" style="border-style:none" alt="logo" /></div><!--end logo-->
<div id="nav" class="menu">
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="vision.html">VISION</a></li>
<li><a href="products.html">PRODUCTS</a></li>
<li><a href="contacts.html">CONTACT</a></li>
</ul>
</div><!--end menu-->
<div id="language"><a href="home.html">EN</a><img src="images2/transparent_spacer.gif" width="5" height="2" style="border-style:none" alt="s"/><img src="images2/slash.gif" width="1" height="12" alt="line" style="border-style:none" /><img src="images2/transparent_spacer.gif" width="5" height="2" style="border-style:none" alt="s"/><a href="index.html">NL</a> </div><!--end language-->
</div><!--end header-->
</div> <--end container-->
</html>
Any tips would be welcome. Thanks a million |
|||||||