Autor Zpráva
lukas zmizik
Profil
kód:
  <style>
  body   {background-color: #8CC6F7;}
  #ram      {margin: 0 auto; padding: 10px; background: blue; width: 700px; opacity: .2 }
  #telo     {margin: auto; background: red; width: 500px;}
  </style>
 .........
  <body>
  
  <div id="ram"><div id="telo">
text</div></div>

záměr:
1) v "body" bude pozadí nějaká obrázková tapeta
2) div "ram" bude průhledný třeba na 20% - bude to takový průhledný rám
3) a uvnitř toho bude div "telo" , kde bude normální obsah

výsledek:
vlastnost "opacity" u divu "ram" se přenáší do vnořených divů a to je blbě... půjde to nějak?
dranel91
Profil
Tuším, že to nepůjde. Budeš muset vymyslet jiné řešení. Zkus nastavit pro div#telo border s rgba, to by mohlo vyhovět tvému záměru.
Someone
Profil
lukas zmizik:
Nevím přesně jaký je účel, takže nedokážu odhadnout jestli je to vhodný způsob, ale lze to tak nějak splácat i tak, že dáš dva divy pod sebe a jeden přehodíš přes druhý záporným marginem:
.div1 {opacity: 0.5; background: black; width: 300px; height: 300px; margin: 0px auto 0px auto;}
.div2 {width: 280px; height: 280px; margin: -290px auto 0px auto;}
<div class="div1"></div>
<div class="div2"></div>

Edit: tak to jsem netušil, ani takto to nejde.. jsem zmaten.
lukas zmizik
Profil
jako jediné řešení mne napadlo tohle:
  <style>
  body   {background-image: url("pozadi.jpg");}
  div      {margin: 0 auto; width: 990px; }
  table   {padding: 0; width: 990px; }
  #ram      {background-color: black; opacity: .6;}
  #telo     {background-color: blue;}
  </style>
 -------------
  <body>
  <div>
  <table cellpadding="0" cellspacing="0">
  <tr height="30px"><td id="ram" colspan="3"></td></tr>
  <tr><td id="ram" width="10px"><td id="telo"> 
                       
   text                 
                       
   <td id="ram" width="10px"></td></tr>
   <tr height="30px"><td id="ram" colspan="3"></td></tr>
   </table>   

Ale nevím nevím, je rok 2012... na druhou stranu, fungovat to funguje, tak co?
Sir Tom
Profil
lukas zmizik:
Vytvoř si v grafickém editoru průhlednější pozadí (png) a ten pak vlož jako pozadi pro #ram.
peta
Profil
Dalo by se to i napozicovat. Ale musis uvazovat opacne. Pruhledne bude sice pod tim, ale fyzicky bude uvnitr :) Pouziji ten someho kod.
<style>
.div0, .div1 {width: 300px; height: 300px; margin: 0 auto; position:relative; background: #080;}
.div1 {width: 280px; height: 280px; left:10px; top:10px; opacity: 0.5; background: #fc0; position:absolute;}
.div2 {width: 260px; height: 260px; left:20px; top:20px; margin: 0 auto; background: #ddd; position:absolute;}
</style>
<div class="div0">
  <div class="div1">pozadi</div>
  <div class="div2">text</div> 
</div>
margin
Profil *
peta:
Dalo by se to i napozicovat.
Ale jenom tehdy, pokud víš, jak vysoký bude DIV s textem, a se se ve většině případů neví.
peta
Profil
margin: Ze by to resilo height:100%?
margin
Profil *
peta:
Ze by to resilo height:100%?
V tomto případě height:100%; nic neřeší.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: