Web Analytics Made Easy - StatCounter opacity - CodingForum

Announcement

Collapse
No announcement yet.

opacity

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    opacity

    If I have a first element with an opacity attributed to it and I place a second element inside/on top of the first one.... how can I make the second element non-opacity?
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”
    Tags: None
  • #2
    With positioning and z-index properties it is possible.... but position value can be absolute only and parent element of both elements should have position:relative defined to it

    Comment

    • #3
      Hi there Asher01,

      here is a basic example...
      Code:
      [color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<title>untitled document</title>

<style type="text/css">
body {
    background-color:#00f;
 }
#container {
    position:relative;
    width:440px;
    margin:auto;
 }
#faded {
    width:400px;
    height:360px;
    padding:40px;
    background-color:#f00;
    border:4px solid #000;
    opacity:0.30;
    filter:alpha(opacity=30);
    font-size:30px;
    font-weight:bold;
    text-align:center;
 }
#unfaded {
    position:absolute;
    z-index:1;
    left:84px;
    top:189px;
    width:300px; 
    padding:10px;   
    border:2px solid #000;
    font-size:30px;
    font-weight:bold;
    text-align:center;
    background-color:#fff;
 }
</style>

</head>
<body>

<div id="container">

<div id="faded">this area is effected by opacity</div>

<div id="unfaded">this area is unaffected</div>

</div>

</body>
</html>
[/color]
      coothead
      ~ the original bald headed old fart ~

      Comment

      • #4
        You can’t since opacity is always inherited. If the parent has 80% opcacity and the child 100% opacity then all in all it’s still 80% (100% of 80% is still 80%, and there is no more than 100% opacity). Depending on what you are trying to achieve you may be able to use an RGBA background color on the parent (“A” standing for “alpha value”, i. e. transparency), like background-color: rgba(255,255,255,.5); but this won’t work in IE. Alternatively you can make the child a sibling of the parent and position it absolutely on top of it.
        Stop solving problems you don’t yet have!

        Comment

        • #5
          Oh OK, I see... that makes perfect sense now that you say that.

          I'll have to do something like Coot's example... find the first non-opacity and then work from that.

          Thank you, all three of you.
          Cheers!
          Asher
          “Opinion is the medium between knowledge and ignorance.”
          “The old believe everything; the middle aged suspect everything: the young know everything.”

          Comment

          • #6
            No problem, you're welcome.
            ~ the original bald headed old fart ~

            Comment

            Previous template Next
            Working...
            X
            😀
            🥰
            🤢
            😎
            😡
            👍
            👎