Solved

css alpha opacity on multiple div, cancel alpha effect on image

Posted on 2004-08-05
18
1,841 Views
Last Modified: 2008-01-09
Hi,

for a web page developing the design is so that a background image is visable through a colored <div> section with alpha effect, defined like this:
<div style="filter: alpha(opacity=80, style=0); background-color: rgb(255,255,255); width:563;height:92%; border: 1px solid rgb(128,128,128)">
 here come content
</div>

The content is another <div> section wich contains text or image, which should not be transparent but is since the parent div has the alpha effect. So, how to make the image so that  background image would not be visible under the image but is visble through the colored div section.

Thanks in advance.
0
Comment
Question by:dzelde
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 4
18 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731628
Hi

Do you mean so the background image would not be visible over the text but over the div? The easiest way to do that is to set another <div> around the content that has a style with no filter, but that just kind of ruins the purpose of opacity anyways. I'm not quite sure exactly what you want.

If you want the alpha filter to be for Mozilla and Safari also, add this to your styles:
moz-opacity:0.8; opacity:0.8
Unfortunately, all the child elements of the <div> will  then inherit the opacity, but that can easily be remedied by setting the child elements to have opacity of 1.0 or 100%

Regards,
Zyloch
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
ID: 11731648
It has to be outside of the div with the filter.  Then put it iin front of the filtered div with absolute positioning and a z-index:

<div style="position:absolute; left:100px; top:100px; z-index:10">
content here
</div>

You will have to determine the value of the top and left properties to get it postioned where yu want it.

This is a bad way to do design and is going to cause you problems trying to maintain the page, but gee whiz effects are usually bad design anyway, so I guess it does not matter.

Cd&
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731666
You can, of course, try putting another <div> around your content that has style of
filter: alpha(opacity=100, style=0);
but that's just to try
0
Command Line Tips and Tricks

The command line is a powerful tool at the disposal of every Linux user. Although Linux distros come with beautiful user interfaces, it's worthwhile to learn the command line because it allows you to do a number of things that you otherwise cannot do from the GUI.  

 
LVL 1

Author Comment

by:dzelde
ID: 11731678
thats what i thought, that making child elements to have opacity of 1.0 or 100 will make it not transparent but it is.

here is an example:
****
<html>
<head></head>
<body background="img/s_elephant.jpg">
<div style="filter: alpha(opacity=80, style=0); background-color: rgb(255,255,255); width:563;height:92%; border: 1px solid rgb(128,128,128)">
    <p style="color: rgb(204,204,204);">
        <div style="filter: alpha(opacity=100, style=0); margin-left: 10px; margin-right: 10px; margin-top: 10px; font-family: Verdana; font-size: 10px;">
            <img src="img/zebres.jpg" />
        </div>
    </p>
</div>
</body>
****
you can see that the image zebres.jpg is also transparen, making it possible to see the "s_elephant.jpg" though the "zebres.jpg" and makes it too fancy.

Martins.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731689
Like Cd, said, it'll be complicated then. I would recommend removing the alpha opacity altogether. Is there any specific reason for needing it?

Regards
0
 
LVL 1

Author Comment

by:dzelde
ID: 11731735
Its just that a designer supplied me this design to implement.. isnt there another way than using abolute positioning.. :( ?

Martins.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731776
Before you try something new, try to take one last stab at it. The child <div> should be like this:
<div style="filter: alpha(opacity=100, style=0); margin-left: 10px; margin-right: 10px; margin-top: 10px; font-family: Verdana; font-size: 10px; background-color:white;">

Regards
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11731795
>>>isnt there another way than using abolute positioning.

Yes tell the designer their design is defective, and if they think it is implementable then they should demostrate how or admit they are a moron. ;^)

Cd&
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731810
Ouch, playing hardball there Cd :)
WARNING: Do above statement at your own expense of turning into a homeless hobo because you lost a job.
0
 
LVL 1

Author Comment

by:dzelde
ID: 11731840
>>>> Yes tell the designer their design is defective, and if they think it is implementable then they should demostrate how or admit they are a moron. ;^)
lol ;)) there is some truth in that!

making the background white for the child div doesnt seem to work either.. i tried to work around with iframe but no luck.. :/
i guess i willl rather exchange some phrases with designer.. hmm.

M.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731845
You might as well. Make sure to tell them that their website will be less cross-browser compatible if they have the filters, which is true :)
0
 
LVL 1

Author Comment

by:dzelde
ID: 11731902
Yea... true about compatiblity.
 so no other way to jump out of div than absolute positioning, which i wont be using in my case.. i guess i might leave the question open for a day or two, since  usually it is possible to define any new style for a child section like div,span or any other..

Thanks a lot, anyway.

M.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11731974
>>>since  usually it is possible to define any new style for a child section like div,span or any other.

Except the non-standard filters are not implemented as true style properties.  They are more closely related to behaviours.

Digging through old documentation I see a possibility.  If the child element is given form with a specified width, and height it might hold an opacity value of its own; at least for IE, not sure that will help for MOZ, but moz opacity is unreliable anyway.

Cd&
0
 
LVL 1

Author Comment

by:dzelde
ID: 11733311
Setting width and height, and theit own opacity for the inner child elements like this:
...
        <div  width="190" height="289" style="filter: alpha(opacity=100, style=0); margin-left: 10px; margin-right: 10px; margin-top: 10px; font-family: Verdana; font-size: 10px; background-color:white;">
            <img src="img/zebres.jpg" width="190" height="289" style="filter: alpha(opacity=100, style=0);"/>
        </div>
...
Does not solve the problem. did i understood the possibility correctly?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11743173
No, I think the child has to be a block element. More like:

<div  width="190" height="289" style="filter: alpha(opacity=100, style=0); margin-left: 10px; margin-right: 10px; margin-top: 10px; font-family: Verdana; font-size: 10px; background-color:white;">
<div style="width:190px;height:289px;filter:alpha(opacity=100,style=0)">
            <img src="img/zebres.jpg" width="190" height="289" />
</div>
        </div>

Cd&
0
 
LVL 1

Author Comment

by:dzelde
ID: 11744227
i inserted your code as another div but its not workin:
***
<html>
<head></head>
<body background="img/s_elephant.jpg">
<div width="190" height="289" style="filter: alpha(opacity=80, style=0); background-color: rgb(255,255,255); width:563;height:92%; border: 1px solid rgb(128,128,128)">
    <p style="color: rgb(204,204,204);">
        <div  width="190" height="289" style="filter: alpha(opacity=100, style=0); margin-left: 10px; margin-right: 10px; margin-top: 10px; font-family: Verdana; font-size: 10px; background-color:white;">
            <img src="img/zebres.jpg" width="190" height="289" style="filter: alpha(opacity=100, style=0);">
        </div>
    </p>
    <div  width="190" height="289" style="filter: alpha(opacity=100, style=0); margin-left: 10px; margin-right: 10px; margin-top: 10px; font-family: Verdana; font-size: 10px; background-color:white;">
<div style="width:190px;height:289px;filter:alpha(opacity=100,style=0)">
            <img src="img/zebres.jpg" width="190" height="289" />
</div>
        </div>
</div>
</body>
***
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11744319
As it seems to still not be working, I think iframes would be the best solution. You could messily realign the inner <div> using absolute or relative positioning, but it would be just that, messy. If you really want the content background to be not transparent, use an iframe.
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question