发表新帖
发表新帖

Create non-transparent div on top of transparent parent element

前端 未结
关注
7 1682
渐次进展
渐次进展 2020-12-29 04:35

EDIT: Changed title to actually be correct

I\'m trying to simulate a modal popup in all HTML and CSS and am having a bit of bad luck w

相关标签:
7条回答
  • 醉话见心
    2020-12-29 05:01

    You can also do this without using a transparent image. Create two separate divs and use z-index to control which one is on top

    Example code on jsfiddle

    0 讨论(0)
  • 攒了一身酷
    2020-12-29 05:09

    A PNG would provide better compatibility (you have to use a filter: statement for IE6) ,but the better CSS3 method is just to use RGBA colours (e.g. background: rgba(0,0,0,0.5); will get you black at 50% alpha), that gets rid of any inherited opacity.

    0 讨论(0)
  • 面向向阳花
    2020-12-29 05:11

    How about using visibility?

    #parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}
    0 讨论(0)
  • 囚心锁ツ
    2020-12-29 05:21

    The way that I was able to put a transparent div behind an opaque div was to use something like:

    `div.transparent-behind { opacity: 0.4; 
                      z-index: -1; }

 div.opaque-ontop { position: absolute; 
                top: (wherever you need it to fit)px;
                left: (some # of)px}'

    where the div's were not nested inside each other, but one right after another in the html

    make sense?

    0 讨论(0)
  • 南笙
    2020-12-29 05:23

    Setting the color of the parent div with opacity with a rgba-color would make more sense here, because in this case the child element wouldnt inherit the opacity and wont be transparent!

    so instead of using background-color: gray or #something, use something like this:

    .modalBackground {
  background-color: rgba(222, 222, 222, 0.7);
}

    Like this the parent-element has an opacity of 0.7 but is does not inherit it to any div or image or whatever inside of this div!

    There are many rgba-generators out there on the net, try them.

    http://www.css3-generator.de/rgba.html

    0 讨论(0)
  • 一生所求
    2020-12-29 05:25

    Updated Answer

    The best way to do this now is to use rGBA colors. It won't work for older browsers, but you can let the design gracefully degrade by just feeding them a solid color. Example:

    CSS

    .parent {
    background: gray; /* older browsers */
    background: rgba(128,128,128,0.7); /* newer browsers */
}

.child {
    background: blue;
}

    Original Answer

    It is annoying, but CSS doesn't allow that. Setting opacity for one element means no child element can have any greater opacity. (100% of 25% opacity is? Right.)

    So, one solution is to use a tiny transparent PNG as a repeating background image to work around that. The only issue there is IE6, and there's an excellent workaround called supersleight.

    (Updated. Think supersleight will work for you.)

    Update Here's a very simple test case. Create the image (say, a PNG with 50% black fill) and then create this file--save them in the same folder. If you don't see a thin box with a transparent background behind 'stuff', then you're either not saving the file correctly or have saved the image somewhere else.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { background:white; }
#overlay { background-image:url(test.png); }
</style>
</head>
<body>
<div id="overlay">stuff</div>
</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题