CSS opacity
Az alábbi kódrészletben a "position:relative" IE esetén valóban segít:
a "szov" div-be rakott gif fájl tényleg nem lesz átlátszó, de sajnos FF alatt igen. Mit lehet tenni?
■ a "szov" div-be rakott gif fájl tényleg nem lesz átlátszó, de sajnos FF alatt igen. Mit lehet tenni?
<style type="text/css">
body{background:url(back2.jpg) no-repeat fixed;text-align:center;}
<!--
/* This is the transparent box */
#transbox {
height: 1000px;
width: 600px;
margin: 0 auto;
padding: 0;
background-color: #ffffff;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
/* This is the container which set text to solid color.
position: relative used for IE */
#szov {
text-align: left;
padding: 20px;
font-weight: normal;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
position: relative;
}
-->
</style>
</head>
<body>
<div id="transbox">
<div id="szov">50% Lorem ipsum dolor sit amet, consectetuer adipiscing etc. etc.<br /><img src="animated_flag.gif" /></div>
</div>
</body>
érdekes
Értelmezés kérdése is
Mire gondolok: legyen az emberi test a példa. Ennek vannak belső szervei és cosntok. Ha azt mondod az ember elemre, hogy legyen átlátszó akkor azt várod, hogy a mögötte levő dolgokat lássad. Ez annak felel meg, hogy a belső elemeket nem lehet "vissza" nem átláthatóvá tenni.
A "röntgen" nézetnél a belső elemeknek megmondhatod, hogy ne látszodjon át. Pl a röntgen felvételen így látod a csontokat.
A CSS opacity tulajdonság az első módon működik, vagyis ha egy belső elemet mégis vissza tudsz állítani kevésbé átláthatóra mint a befoglaló elemét, akkor az hibás működést jelent.