PDA

View Full Version : Problem with Opacity


peymannaji
چهارشنبه 25 آذر 1388, 14:49 عصر
با سلام

در كد زير چه تغييري ايجاد كنم كه داخلي ترين جدول Opacity نداشته باشه ؟




<div id='AjaxLoader' class='BlueBackground' style='width: 100%; display: block; position: absolute;
left: 0px; top: 0px; background: Black; filter: alpha(opacity=40); opacity: 0.4;
z-index: 9999'>
<table width='100%' height='100%'>
<tr>
<td align='center' valign='middle'>
<table style='width: 196px; height: 124px; text-align: center; background-image: url('images/AjaxGrayScreenLoader.gif');'>
<tr>
<td>
<img alt='' src='ajax-loader.gif' />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
afshin9032
چهارشنبه 25 آذر 1388, 14:53 عصر
به داخلي ترين جدول استايل opacity با مقدار 100 بده
peymannaji
چهارشنبه 25 آذر 1388, 19:27 عصر
به داخلي ترين جدول استايل opacity با مقدار 100 بده
این کارو کردم درست نشد
ali_shmki
چهارشنبه 25 آذر 1388, 21:51 عصر
به داخلي ترين جدول استايل opacity با مقدار 100 بده



ايشون ميگن opacity نداشته باشه بعد شما ميگي مقدارشو 100 بده؟؟؟!!!!

مشكل كد شما اينه كه محتويات style داخلي ترين table شما بايد داخل " " بايد باشه تا با ' ' تداخل نكنه.



<div id='AjaxLoader' class='BlueBackground' style='width: 100%; display: block; position: absolute;
left: 0px; top: 0px; background: Black; filter: alpha(opacity=40); opacity: 0.4;
z-index: 9999'>
<table width='100%' height='100%'>
<tr>
<td align='center' valign='middle'>
<table style="width: 196px; height: 124px; text-align: center; background-image: url('images/AjaxGrayScreenLoader.gif');filter: alpha(opacity=0)
">
<tr>
<td>
<img width="144" height="115" alt='' src='../../../AppServ/www/En_Computer.jpg' />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
emad_67
چهارشنبه 25 آذر 1388, 22:22 عصر
در كد زير چه تغييري ايجاد كنم كه داخلي ترين جدول Opacity نداشته باشه ؟به صورت پیشفرض opacity از عنصر والد به فرزند به ارث میرسه و نمیشه کارش کرد مگه اینکه ساختار رو عوض کنی. مثلا اون جدولی رو که می خوای opacity نداشته باشه رو بیار بیرون از div قرار بده و بعد جوری موقعیت دهی کن که درون div قرار بگیره.
peymannaji
پنج شنبه 26 آذر 1388, 14:58 عصر
div و jquery کمک بسیاری می کنه و cross browser است !

از افکت fade جی کوئری استفاده کنید !


بطور تستی من 2 تا div تو در تو درست کردم . از کد زیر استفاده کردم . که ظاهر کد اول فقط اجرا میشه :



$("#div").fadeTo("fast",0.1);
$("#innerDiv").fadeTo("slow",1);



در واقع خاستم div بیرونی رو کم رنگ کنم و div داخلی رو با رنگ اصلی خودش نشون بدم که نشد . لطفا راهنمایی بفر مائید .
peymannaji
پنج شنبه 26 آذر 1388, 15:03 عصر
به صورت پیشفرض opacity از عنصر والد به فرزند به ارث میرسه و نمیشه کارش کرد مگه اینکه ساختار رو عوض کنی. مثلا اون جدولی رو که می خوای opacity نداشته باشه رو بیار بیرون از div قرار بده و بعد جوری موقعیت دهی کن که درون div قرار بگیره.


من حتی از !important برای override کردن css استفاده کردم اما اینجا جواب نداد . روشی که گفتید رو میشه پیاده کردم اما با توجه به ساختار برنامه مقداری کارم زیاد میشه . در نهایت اگر مشکل حل نشه با jquery مجبورم که همین کار رو انجام بدم .
با تشکر
afshin9032
پنج شنبه 26 آذر 1388, 17:52 عصر
ايشون ميگن opacity نداشته باشه بعد شما ميگي مقدارشو 100 بده؟؟؟!!!!



كمي بيشتر يه پست توجه كنيد :افسرده:

اگه
filter: alpha(opacity=40); opacity: 0.4
رو به
filter: alpha(opacity=100); opacity: 0.1
تبديل كنيم اثر opacity خنثي مشه چون 100 بيشتريم مقدار رو اعمال مي كنه
كه ظاهرا اين روش تاثيري نداشت
peymannaji
جمعه 27 آذر 1388, 12:44 عصر
دوستان لطفا راهنمایی بفرمائید . یعنی واقعا 2 تا دیو تو در تو نمیتونن با opacity متفاوت ظاهر بشن ؟
emad_67
جمعه 27 آذر 1388, 13:51 عصر
دوستان لطفا راهنمایی بفرمائید . یعنی واقعا 2 تا دیو تو در تو نمیتونن با opacity متفاوت ظاهر بشن ؟

خیر، اصلا قابل override شدن نیست، توی چند سایت مختلف هم همون روشی رو که خدمتتون عرض کردم فقط معرفی کردن.
با jquery من کار نکردم، اما با css و با ساختار html اولیه شما همچین کاری ممکن نیست.
peymannaji
جمعه 27 آذر 1388, 14:08 عصر
فکر کنم چاره ای نیست :اشتباه:
emad_67
جمعه 27 آذر 1388, 20:09 عصر
فکر کنم چاره ای نیست :اشتباه:
یه راه دیگه هم اینه که opacity رو تغییر ندید و به جاش یک عکس png که دارای شفافیت هست رو در زمینۀ div بیرونی بزارید.

حتی اگر قضیه عنصر والد و فرزند هم باشه تا موقعی که به فرزند کلاس بدی مشکلی نیست !

در مورد opacity قضیه فرق می کنه. کد زیر رو تست کن، اگه تونستی opacity دیو داخلی رو تغییر بده :لبخند:

<style type="text/css">
.ctn1
{
opacity: 0.5;
background-color: blue;
height: 200px;
}
.ctn2
{
opacity: 1;
background-color: green;
height: 100px;
}

</style>
</head>

<body>
<div class="ctn1">
<div class="ctn2">test</div>
</div>
</body>