0

I want to put the white box on transparent filter.

By this source, overlay div is also transparent.

I don't want overaly translarent.

And I want to centerize the whitebo too.

Is there any good idea??

#filter {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #000;
  filter: alpha(opacity=80);
  -moz-opacity: 0.80;
  opacity: 0.80;
  z-index: 100;
}

* html #filter {
  /* ie用 */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight: document.body.offsetHeight + 'px');
}

#overlay {
  display: block;
  position: relative;
  background: white;
  top: 150px;
  width: 400px;
  height: 400px;
  text-align: center;
  color: #fff;
  z-index: 102;
}
<div id="filter">
  <div id="overlay">

  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
whitebear
  • 11,200
  • 24
  • 114
  • 237
  • Regarding your `opacity` fallbacks for IE and FF: `filter: alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80;` - for the 2019 browser landscape, you're safe to use: `opacity: 0.8` in place of these three alternatives. – Rounin Nov 27 '19 at 11:15
  • Also note that CSS Expressions were an experimental innovation adopted by IE but deprecated in IE8. See: https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/dn384050(v=vs.85) – Rounin Nov 27 '19 at 11:18

0 Answers0