Új hozzászólás Aktív témák

• #900 Louro őstag

  Új Válasz 2013-02-02 21:52:36 #900

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Louro

  őstag

  Sziasztok

  Két napi kutatás után fordulok hozzátok.
  A téma: transparency.

  Adott egy div. Abban elhelyeztem 3 másik div-et.

  A fő div-nek beállítottam, hogy az opacity:0.3. A benne levő 3 div-nek pedig 0.7-et. Az a baj, hogy IE9 és IE10 alatt jól jelenik meg, de szinte kutya se használja már. A gondom, hogy Chrome alatt meg csak a fő div értékét veszi figyelembe. A rajta levőket a fődiv-hez állítja. Azonban, ha a fő div a kevésbé áttetszőbb (az 0.9-es értékkel bír), akkor a rajta levő 3 div átlátszó lesz.

  A kódrészletek:
  css:
  #base {
  margin-top: 40px;
  margin-left:auto;
  margin-right:auto;
  width:1000px;
  height:520px;
  opacity:0.3;
  filter:alpha(opacity='30');
  -webkit-opacity:0.3;
  -khtml-opacity:0.3;
  -moz-opacity:0.3;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background:#eee;
  z-index:0;
  border:2px;
  }

  #menu-base {
  position: absolute;
  margin-top:10px;
  margin-left:10px;
  width:150px;
  height:500px;
  filter:alpha(opacity='70');
  -webkit-opacity:0.7;
  -khtml-opacity:0.7;
  -moz-opacity:0.7;
  opacity:0.7;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background:#bbb;
  z-index:1;
  }

  #content-base {
  position: absolute;
  margin-top:10px;
  margin-left:165px;
  width:700px;
  height:500px;
  filter:alpha(opacity='70');
  -webkit-opacity:0.7;
  -khtml-opacity:0.7;
  -moz-opacity:0.7;
  opacity:0.7;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background:#bbb;
  z-index:1;
  }

  #design-base {
  position: absolute;
  margin-top:10px;
  margin-left:870px;
  width:115px;
  height:500px;
  filter:alpha(opacity='70');
  -webkit-opacity:0.7;
  -khtml-opacity:0.7;
  -moz-opacity:0.7;
  opacity:0.7;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background:#bbb;
  z-index:1;
  }

  html:
  <div id="base">
  <div id="menu-base">
  .....
  </div>
  <div id="content-base">
  .......
  </div>
  <div id="design-base">
  ...
  </div>
  </div>

Új hozzászólás Aktív témák