|
CSS - Opacity Question: Images
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. Similar TutorialsI'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 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? hi all ! Im getting image not found errors and I need some help. Im using this format to load the images for my template Code: background:url(../images/date_bg.gif) The url for my image should be: http://joomla.mydomain.com/template/mytemplate/images/logo.jpg but instead Im getting: http://joomla.mydomain.com/images/logo.jpg Wich is the correct way to do it? I know the easy way is to just copy the path at the CSS, but if I change the domain or any other setting then it become useless unless I edit it again. i have a design which i sliced in photoshop and as per the requirement i had to slice into 5 images and each slice had a different width however the total of the 5 images is 900px and fixed height of 200px so each of the 5 images have a height of 200px and width with different values which add upt0 900px which is the total width of the photoshop design i used a center layout page with the wrapper set to 900px, when i used 5 image tags all the images were sitting next to each other except for the last 5th image which was starting in the next line however in the design all should appear next to each other, i total width of the div which holds the images is 900px and also the total width of each images is 900px. so i created 5 inner divs inside a containing div and i set the width and height of the inner divs based on the width and height of each images and this worked fine however i tried another method of using 5 img tags inside just 1 div and in the css i mentioned #div img{ float: left; } after i used this method all the images were sitting next to each other as per the design, if i remove float: left; then the last image starts in a new line any reason why when i was using all 5 img tags with giving float: left the last image was starting in a new line as the total width is 900px thanks. In my ongoing project I am making a complex fixed footer that has downloadable resources. I am placing three social network 64x64 thumbnails linking to those sites side by side. The question I am conflicted with is should I make the images available in the xhtml mark up between the <li> tags or should I create images in the css as separate divs inside the footer with floating properties so that they line up next to each other? I know it is a matter of file size vs preference but in this case it seems there would be less code all around by placing it in the <li> tags in the xhtml and styling the <li> as inline rather than creating three separate divs and styling those in the css that goes along with it. Or is there an easier way entirely? Thanks for your thoughts LB So, I'm pretty new to all this, and any help is really key. So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it. The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box. Is there a way to tell the browser not to show that selection box?? 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 opacity set for a column <td> but I only want the background image to be 50% opaque, not the text too. I tried the following... <td style="filter:alpha(opacity=50);"> <span style="filter:alpha(opacity=100);"> Text here...</span></td> Is there a reason why the 2nd style="filter:alpha()" has no effect on the text what so ever? The image is already transparent, I exported it as a PNG file with transparency allowed or what not. I am trying to make the background transperency.. but the text on it should be bright and visible.. but i am not able to make the text brighter opacity:0.25; -moz-opacity:0.25; filter:alpha(opacity=25); u can look at the menu bar here http://www.harshamv.com/test/ 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 ? hi, ive been messing with opacity and want to know if i can achieve this. I would like to have a background image on my page, then lay some divs over it. I want the image to be full opacity around the divs and be faded in the divs. so i thought i'd add a class to the divs: .opaq { filter: alpha(opacity=50); opacity: 50%; -moz-opacity:0.5; } but the div inside with my content inherits the opacity and therefore is faded too is there a way of having the opacity on the background of the div yet have the content 'full' wat about z-index? to bring the content to the front heres a pic: I've set the main div content for opacity like this #content-main { margin-right:1%; margin-top:0; margin-bottom:2%; width:58%; background-color:#ffffff; filter:alpha(opacity=70); opacity:0.7; } but when I put an image in the div it acquires the opacity, and I want it to have none. I've tried to give it a style of opacity:1 and it didn't help. I tried alterting the image z-index to greater than 1 and it didn't help. How do I get the image not to acquire the opacity of the div? Thanks 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? 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>
Does anyone know an element to control table opacity for a stylesheet? Or a stand-alone tag, for that matter...? I am trying to impose a translucency for the background image of my page (using CSS background-image), so that if there was no text on the page, the image looks solid, but when text is displayed over the page, the text takes precedence and looks solid, but the underlying bits of the background image becomes translucent, only partially showing through so as not to conflict with the text. How do I achieve that with CSS? I was thinking along the lines of doing something with the background attribute of the text itself, like an XOR bit-mask of sorts, so that underlying bits of the background image on the page would be XOR'd with the background of the text to create a washed-out effect. Or something like that. Any ideas? Thoughts? Hallo! I'm a newbie here, and in CSS too, and would like to be helped from you guys.. I want to make a content with a transparent/opacity background, and since i dont want the content to be transparent too, i make two divs. <div id="opacBkg" style=" position: absolute; z-index: 15; left: 10%; top: 155px; bottom: 20%; width: 80%; background-color:#999933; opacity: 0.50; filter: alpha(opacity = 0.50); -moz-opacity: 0.5; "></div> <div id="Content"> <h3 style="text-align:right;">Welcome to ABC Service</h3> <h1 style="text-align:right;">Wilkommen auf ABC Service</h1> </div> and i have put the Conten declaration in style.css. The #Content: #Content { position: absolute; z-index: 20; left: 10%; top: 155px; bottom: 20%; width: 80%; font-family: Garamond, "Times New Roman", Times, serif; font-size: 14px; color: #ffffff; overflow: auto; margin: 20px 10% 5px 10px; } And so i have make 2 overlapping divs.. And the problem is that the text appears to be slightly mispositioned, the text is out of the background div.... Hope you can help me... Hello, I'm having a problem using opacity in IE. My opacity works fine in Mozilla but it doesn't want to work in IE. I don't think that it is my css code: Code: .ui-slider-disabled .ui-slider-handle { opacity: 0.5; filter: alpha(opacity=50); }
7.ui-slider-range { position: absolute; background: #fcff00; opacity: 0.3; filter: alpha(opacity=30); width: 100%; height: 100%; }
Can anyone help me? My website page: http://www.demo.iadvise.be/pls/apex11g/f?p=1006:40 Thanks in advance Kind regards, Oli |
|||||||