/    Sign up×
Community /Pin to ProfileBookmark

how to cancel transparency

Copy linkTweet thisAlerts:
May 28.2008

Hi I have a CSS like this:

body {
background-image: url(‘images/bkg.jpg’);
}

#wrapper {
background-color: #2222ff;
overflow: hidden;
width: 800px;
margin: 10px auto;
padding: 0px;
text-align: center;
border: 0px solid green;

filter:alpha(opacity=80); /* for IE 6 or > */
opacity: 0.8; /* for Safari */
-moz-opacity: 0.8; /* for NS */
-khtml-opacity: 0.8;

}

#pics {
width: 320px;
height: 240px;
border: 0px;
}
</style>
</head>
<body>
<!– wrapper –>
<div id=”wrapper”>
<!– image should not be transparent –>
<img src=”images/pic2.jpg” id=”pics”>
</div>
</body>
</html>

This works great as the wrapper is transparent as I wanted, but how do make the images/pic2.jpg not transparent? I’ve tried to use z-index and also tried to reset the opacity in the img to 1.0, none of them works.

Thanks in advance.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadMay 28.2008 — Hi there MacPC,

try it like this...
[color=navy]
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;

&lt;style type="text/css"&gt;
body {
background-image:url(images/bkg.jpg);
}
#wrapper {
position:relative;
width:800px;
height:240px;
border:1px solid #0f0;
margin:10px auto;
}
#blue_box {
position:absolute;
width:800px;
height:240px;
background-color:#22f;
filter:alpha(opacity=80); /* for IE 6 or &gt; */
opacity:0.8; /* for Safari */
-moz-opacity:0.8; /* for NS */
-khtml-opacity:0.8;
}
#pics {
position:absolute;
width:320px;
height:240px;
margin-left:240px;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div id="wrapper"&gt;

&lt;div id="blue_box"&gt;&lt;/div&gt;

&lt;img id="pics" src="images/pic2.jpg" alt=""&gt;

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
[/color]
[i]coothead[/i]
Copy linkTweet thisAlerts:
@MacPCauthorMay 29.2008 — Hi coothead,

Thanks for the reply. This works, but I am still wondering if it can be done without using a position: absolute? If I understand correctly, transparency is inherit, so subsequently any element nested within it will be transparent, is there to turn on or off one element?
Copy linkTweet thisAlerts:
@cootheadMay 29.2008 — Hi there MacPC,
[color=navy]...but I am still wondering if it can be done without using position:absolute[/color][/quote]
As far as I know, it cannot be done any other way.

If this method works as required, why are you loathe to use it?

[i]coothead[/i]
Copy linkTweet thisAlerts:
@MacPCauthorMay 29.2008 — "why are you loathe to use it?" Oh, I don't loathe using it. I think it works great. ?

Just out of curiosity, that all. Always look for other ways of doing things. ?
Copy linkTweet thisAlerts:
@cootheadMay 29.2008 — [indent]That's good then, another problem bites the dust. ?[/indent]
×

Success!

Help @MacPC spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...