اثر نکردن دستورات css روی div داخلی

[ravand]

سلام. این کد های ساده رو ببینید:

<style>
.test{
opacity: 0.25;
}
.testi{
font-weight:bold;
}
</style>
<div class="test">متن دیو اصلی<div class="testi">متن داخلی</div></div>
الان من میخوام خاصیت opacity: 0.25 روی دیو داخلی یعنی کلاس testi اثر نکند و فقط روی کلاس test اثر کند.
متشکرم.

[qartalonline]

opacity استثنا میباشد و بر روی تگهای فرزند تاثیر میگذارد و نمیشه اثر اون رو از بین برد.
بهتره از rgba استفاده کنید.

[tamafi6]

opacity:به کل عنصراعمال میشه بهترین راه یااستفاده از rgba برای عنصرموردنظرمیباشد یا اینکه عنصرموردنظرراداخل span قراربدید وبه اون


.testi{
font-weight:bold;
opacity:1;
}
بدید

[ravand]

opacity:به کل عنصراعمال میشه بهترین راه یااستفاده از rgba برای عنصرموردنظرمیباشد یا اینکه عنصرموردنظرراداخل span قراربدید وبه اون


.testi{
font-weight:bold;
opacity:1;
}
بدید

این کاری که گفتید رو کردم ولی این باعث شد که span حالت شیشه ای خودش رو از دست بده. من میخوام یه حالت شیشه ای و تار داشته باشه:

<style>
.test{
opacity: 0.25;
}
.testi{
font-weight:bold;
opacity:1;
}
</style>
<div class="span">متن دیو اصلی<div class="testi">متن داخلی</div></span>

این روش رو هم تست کردم ولی توی اکسپلورر پشتیبانی نمیشه:

<style>
.test{
background:rgba(223,223,223,0.85);
}
.testi{
font-weight:bold;
}
</style>
<div class="test">متن دیو اصلی<div class="testi">متن داخلی</div></div>

[refugee]

راوند جان بهترین کار همینه که از rgba استفاده کنید .

منم همین یه روش رو بلدم فقط . شاید راه های دیگه ای باشه ... ولی همه جا همین یک روشو دیدم

[tamafi6]

این دوروش رانگاه کنید هردوتاش یکی هست


.test{
background-color:rgba(0,0,0);
opacity:0.5;
color:#000;
}

.test{
background-color:rgba(0,0,0.5);
font-weight:bold;
color:#000;
}
ولی روش دوم بهتره چون مشکل اول رانداره روش دوم دراکسپلوررجواب میده اگر rgba جواب نداداز hsla استفاده کنیدماننداین


hsla(0,100%,13%,1.0)
اگربازهم جواب نداد مجبورید ازتصاویراستفاده کنیدازتصاویری که به صورت شیشه ای ساخته شده استفاده کنید وگرنه بایدازفیلترهای اکسپلورراستفاده کنیدکه بهتره صرف نظرکنید

[ravand]

اولین دمو رو ببینید:
http://jschr.github.io/bootstrap-modal/
حتی توی اکسپلورر هم کار میکنه!
از بوتستراپ استفاده شده ولی باید بشه کدهای مورد نظر رو ازش جدا کرد. اونقدر شلوغه که متوجه نشدم کدهایی که برای این کار استفاده شده کجاشه؟

[qartalonline]

اونجا احتمالا از جی کوئری استفاده شده.
به لینک زیر مراجعه کنید:
http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

[ravand]

اونجا احتمالا از جی کوئری استفاده شده.
به لینک زیر مراجعه کنید:
http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

من با دلیل بهتون گفتم نمیتونم از این دستور opacity: 0.3; استفاده کنم چون دیو های داخلی رو هم فرا میگیره!!!

[2undercover]

اولین دمو رو ببینید:
http://jschr.github.io/bootstrap-modal/
حتی توی اکسپلورر هم کار میکنه!
از بوتستراپ استفاده شده ولی باید بشه کدهای مورد نظر رو ازش جدا کرد. اونقدر شلوغه که متوجه نشدم کدهایی که برای این کار استفاده شده کجاشه؟

1. تگ div که باعث میشه اون هاله ی سفید ایجاد بشه از تگ div که محتویات Modal رو نگه میداره جداست.

2. تنها چیزی که باعث میشه توی IE هم درست جواب بده استفاده از این در کنار opacity هست:

filter: alpha(opacity=60);

[ravand]

opacity خودش به تنهایی هم جواب میده نیازی به این دستور filter: alpha(opacity=60); نیست.
مثل اینکه شما هم سوال رو درست نخوندید!
من گفتم نمیخوام به div داخلی اثر خودش رو نشون بده!

[qartalonline]

من با دلیل بهتون گفتم نمیتونم از این دستور opacity: 0.3; استفاده کنم چون دیو های داخلی رو هم فرا میگیره!!!

منم لینکی رو دادم که آموزش داده که opacity در div فرزند تاثیری نداره.

[engmmrj]

http://tadayoni.ir/%D8%A7%D8%B9%D9%85%D8%A7%D9%84-opacity-%D8%A8%D8%AF%D9%88%D9%86-%D8%AA%D8%A7%D8%AB%DB%8C%D8%B1-%D8%A8%D8%B1-%D8%B1%D9%88%DB%8C-%D9%81%D8%B1%D8%B2%D9%86%D8%AF%D8%A7%D9%86/

[ravand]

از همتون متشکرم
بالاخره امدم برای اینکه از اکسپلورر پشتیبانی کنه از این دستور استفاده کردم و مشکل حل شد:

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(Gradien tType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
http://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8