تغییر opacity بک گراند با کلیک روی دکمه

[np.1400 542]

سلام.

من الان از این بکگراند استفاده میکنم.

.color {background:rgba(0,0,0,1);}

اگه بخوام شفاف بشه اینجوری میزنم.

.color {background:rgba(0,0,0,0.4);}

حالا راهی هست که فقط قسمت آخرش تغییر کنه؟

یعنی تو جاوا فقط 1 تبدیل بشه به 0.4 که شفافیت عوض بشه؟

یا اصلا خود CSS راهی برای تغییر شفافیت بک گراند نداره؟

ممنون

[dukejavad 18]

تو css تا اونجا که می دونم امکانش نیست حالا باز اگر دوستان میدونند بگن

opacity هست که به کار شما نمیاد چون ذکر کردید شفافیت بکگراند!!

[علی زینلی 2114]

سلام

<div id="wpparsi" style="background:rgba(0, 0, 255, 0.5);" onclick="testFunction()">test mikonam</div>
<script>
function testFunction() {
    document.getElementById("wpparsi").style.background = "rgba(0, 0, 255, 0.24)";
}
</script>

[np.1400 542]

سلام

<div id="wpparsi" style="background:rgba(0, 0, 255, 0.5);" onclick="testFunction()">test mikonam</div>
<script>
function testFunction() {
document.getElementById("wpparsi").style.background = "rgba(0, 0, 255, 0.24)";
}
</script>

ممنون

ولی این رنگ رو هم تغییر میده به (0,0,255) .

میخوام رو چندین عنصر همزمان کار کنه. یعنی رنگ همه سرجاشون بمونه ولی شفافیت عوض بشه.

یا باید تو css یه روشی برای شفافیت بک گراند باشه یا اینکه تو جاوا اسکریپت روشی باشه که فقط چند کاراکتر آخر رو تغییر بده.

یه چنین چیزی:

<div class="wpparsi" style="background:rgba(0, 0, 255, 0.5);" onclick="testFunction()">test mikonam1</div>
<div class="wpparsi" style="background:rgba(0, 255, 0, 0.5);" onclick="testFunction()">test mikonam2</div>
<div class="wpparsi" style="background:rgba(255, 0, 0, 0.5);" onclick="testFunction()">test mikonam3</div>

<script>
function testFunction() {
	 document.getElementsByClassName("wpparsi").style.background = "rgba(x, x, x, 0.24)";
}
</script>

البته میدونم این کارن میکنه ولی دنبال روشی تو جاوا اسکریپت یا جی کوئری هستم که کار کنه.

ممنون

[علی زینلی 2114]

ممنون ولی این رنگ رو هم تغییر میده به (0,0,255) . میخوام رو چندین عنصر همزمان کار کنه. یعنی رنگ همه سرجاشون بمونه ولی شفافیت عوض بشه. یا باید تو css یه روشی برای شفافیت بک گراند باشه یا اینکه تو جاوا اسکریپت روشی باشه که فقط چند کاراکتر آخر رو تغییر بده. یه چنین چیزی:

test mikonam1
test mikonam2
test mikonam3
<script> function testFunction() { document.getElementsByClassName("wpparsi").style.background = "rgba(x, x, x, 0.24)"; } 

البته میدونم این کار نمیکنه ولی دنبال روشی تو جاوا اسکریپت یا جی کوئری هستم که کار کنه. ممنون

از toggle class استفاده کنید

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass

[webafra 60]

سلام .

بهتره از addClass و removeClass و یا طبق گفته ی آقای زینلی ، از toggle class استفاده کنید .

[np.1400 542]

ببخشید وقت شما رو میگیرم.

ولی اضافه کردن یک کلاس چه کمکی میتونه به من بکنه؟

فقط زمانی میتونه کمک کنه که تو css کدی برای شفافیت بکگراند داشته باشیم.

یعنی بگم کلاس glass رو اضافه کن بعد تو سی اس اس بگم بک گراند glass رو شفاف کن. اما چنین چیزی نداریم تو css

اگه چیز دیگه ای مد نظرتونه ممنون میشم توضیح بدید.

[dukejavad 18]

من خیلی دنبال این تو css گشتم نگرد چیزی نداره که این کارو انجام بده و هرچی داره رنگ رو درگیر میکنه

مگر اینکه بگی دقیق میخوای چیکار کنی تا اساتید جاوااسکریپت شاید بتونن کمک کنن مثلا اینکه چرا کد رنگ رو نمیخوای بنویسی!

موفق باشی

[webafra 60]

سلام مجدد

چیزی که من از سوالتون درک میکنم اینه که میخواین دو حالت برای شفافیت رنگ داشته باشید و زمانی که روی دکمه ای کیلیک کردید ، شفافیت تغییر کنه ، اگر اینطور باشه ، شما باید به این شکل کار کنید :

درون css :

.color {background:rgba(0,0,0,1);}

.op-color {background:rgba(0,0,0,0.5);}

حالا با جی کوئری برای رویداد کیلیک دکمه ، حالت addClass رو فراخوانی کنید و کلاس op-color رو اضافه کنید !

به همین راحتی

ویرایش شده فروردین 94 توسط dodgy

[AmirHZ 10]

شما میخواید تمام باکس های شفافیتشون کم بشه و این باکس ها رنگشون فرق داره و اگر از کد دوستان استفاده کنید رنگشون یکی میشه ؟ درسته؟

[dukejavad 18]

تو این حالت هم برای بار دوم دوباره رنگ رو باید نوشت کما اینکه شما هم نوشتید (0,0,0,5)

این دوستمون میخواد فقط و فقط شفافیت رو تغییر بده و دیگ اسمی از رنگ برده نشه

AmirHZ جان درسته همین رو میخواد

ویرایش شده فروردین 94 توسط dukejavad

[AmirHZ 10]

پاسخ شما اینجا هست

البته من فقط سرچ کردم آشنایی زیادی با SASS ندارم

http://sassmeister.c...bf1ee3bf2575262

ویرایش شده فروردین 94 توسط AmirHZ.ir

[dukejavad 18]

پاسخ شما اینجا هست

البته من فقط سرچ کردم آشنایی زیادی با SASS ندارم

http://sassmeister.c...bf1ee3bf2575262

تو اینم که مثل قبلی ها rgba هست ))))

من موندم css چرا یه راه نداره که فقط رو شفافیت بکگراند اثر بذاره !!

[علی زینلی 2114]

چرا مثلاً از 2 تا div استفاده نمیکنید که یکیش به عنوان پس زمینه باشه ، اون یکی دیگه اش به عنوان نوشته ، شما opacity پس زمینه رو تنها کم کنید؟

خیلی کار های دیگه میشه کرد...

دلیل این هم که به صورت مستقیم نمیشه تغییرش داد alpha پس زمینه رو همینه.

اینم یه نمونه است که میتونید رنگ رو توی jquery بهش بدید تا براتون alpha رو به صورت 0.6 بده.

امتحان کنید:

http://jsfiddle.net/cxAaU/

شما بگید کجا میخواین مصرفش کنین شاید دوستان بتونن کمک بهتری بکنن...

ویرایش شده فروردین 94 توسط علی زینلی

[np.1400 542]

اوووو

راضی به این همه زحمت دوستان نبودم.

میخواستم یه کار کنم وقتی رو دکمه کلیک میکنی همه ی چیزایی که کلاس glass دارن شیشه ای بشن و تصویر زمینه یه کم مشخص بشه.

فکر میکردم مثل بقیه چیزا یه راه ساده وجود داره.

بخشید. من هیچ وقت نذاشته بودم تاپیکم دو صفحه ای بشه.

[dukejavad 18]

خب اینو همون طور با rgba میشه بسازی

اون استایل شیشه ای رو تو glass بنویس بعد هم که با جاوا میگی کلیک شد کلاس glass رو به اون عناصری که میخوای یا حالا همه عناصر بدی

رنگی که تو rgba کلاس glass میذاری باید رنگ همون استایل شیشه ای باشه که حالا باید ببینی با چه رنگی قشنگ میشه

[np.1400 542]

خب دیگه اینجوری همه چی یه رنگ میشه.

باید برای هر کدوم کلاس تعیین کنم. مثلا blueglass و redglass و ...

خیلی هم سخت نیستا ولی خواستم حرفه ای بشه.

از همه تشکر میکنم اساسی.

[dukejavad 18]

خب اگر میخوای همون شیشه ای بشه که شیشه ای یه رنگ که بیشتر نداره

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

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

http://cssdeck.com/labs/css3-glass-button

کلاس glass رو با این استایل بساز

به نظرم این قشنگ میشه حالا باز بسته به کارت خودت میدونی خوبه یا نه ولی استایل شیشه همینه که برات گذاشتم

موفق باشی

[np.1400 542]

دوباره سلام.

مشکل من حل شده. اما برای کنجکاوی دوباره به اینجا برگشتم

اینی که آقای زینلی داده بود یه تغییر دادم واسش دکمه گذاشتم

http://jsfiddle.net/cxAaU/25/

الان اگه مقدار شماره 1 بیاد جای شماره 2 همه چی حل میشه.

یعنی جای شماره 2 کدی بذاریم که بک گراند رو از توی کدهای سی اس اس بخونه.

تو جی کوئری یه چیزی هست به نام attr() اگه اشتباه نکنم کدهای html رو بر می گردونه. اگه بشه این کارو برای css کرد حل میشه.

[np.1400 542]

خب پیدا کردم:

http://jsfiddle.net/cxAaU/30/

الان دکمه رو بزنی جعبه رو شیشه ای میکنه.

رنگشم از css تعیین میشه دیگه ربطی به جاوا نداره.

ممنون از شما