CODEWITHSUNDEEP
css
user1530249
user1530249

Reputation: 1057

How to create opaque under layer with CSS?

I am trying to add a opaque underlay using CSS.

Could you help me understand what I am doing wrong?

CSS

popUp#translucent{
    width: 400px;
    height: 100px;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    position:fixed;
    opacity: .4;
}

popUp#content{
width:400px;
height: 100px;

}
#popContainer{
width: 400px;
height: 100px;
display: visible;
position: fixed;
z-index: 1000;
}

HTML

<div id="popContainer">
    <popUp id="translucent"></popUp>
    <popUp id = "content">
        <button class="btn large btn-custom" data-h="193" data-s="32" data-l="64" ,="" data-p="15">Alpha</button>
    </popUp>
</div>

http://jsfiddle.net/CeRX3/

Thanks

Upvotes: 0

Views: 3174

Answers (2)

Neji
Neji

Reputation: 6839

Here is a way to create underlay for a button using CSS.

Plz check this fiddle made by using code from w3 schools.

html

<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>

css

div.background
  {
  width:500px;
  height:250px;
  background:url(http://www.w3schools.com/css/klematis.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }

You can use above code. There is this problem with Opacity in CSS.

The Problem With CSS Opacity The problem occurs when we add child elements to the html element that this code affects. All child elements will inherit the same opacity settings, even if you try to specify full opacity for all those elements (which would be too troublesome to do anyhow).

The Hacky Solution How can we work around this problem? In some instances, you could visually mimic a parent-child relationship between the elements using absolute positioning, and this will resolve the problem. Then if u want to solve your problem then you may have to use a work around method for the purpose.

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28573

change your background colour to grey and the opacity to .1 in the translucent. it looks more translucent then.

Upvotes: 0

Related Questions