رفتن به مطلب
np.1400

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

پست های پیشنهاد شده

سلام.

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

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

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


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

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

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

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

ممنون

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

به اشتراک گذاری این ارسال


لینک به ارسال

سلام


<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>

به اشتراک گذاری این ارسال


لینک به ارسال

سلام


<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>

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

ممنون

به اشتراک گذاری این ارسال


لینک به ارسال
ممنون ولی این رنگ رو هم تغییر میده به (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

به اشتراک گذاری این ارسال


لینک به ارسال

سلام .

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

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

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

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

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

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

موفق باشی

به اشتراک گذاری این ارسال


لینک به ارسال

سلام مجدد :)

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

درون css :


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

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

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

به همین راحتی :)

ویرایش شده توسط dodgy

به اشتراک گذاری این ارسال


لینک به ارسال

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

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

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

ویرایش شده توسط dukejavad

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

http://sassmeister.c...bf1ee3bf2575262

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

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

http://sassmeister.c...bf1ee3bf2575262

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

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

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

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

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

امتحان کنید:

http://jsfiddle.net/cxAaU/

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

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

به اشتراک گذاری این ارسال


لینک به ارسال

اوووو

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

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

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

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

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

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

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

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

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

به اشتراک گذاری این ارسال


لینک به ارسال

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

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

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

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

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

موفق باشی

به اشتراک گذاری این ارسال


لینک به ارسال

دوباره سلام.

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

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

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

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

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

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

post-1392-0-78334000-1428755497_thumb.jp

به اشتراک گذاری این ارسال


لینک به ارسال

خب پیدا کردم:

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

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

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

ممنون از شما

به اشتراک گذاری این ارسال


لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

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

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


×
×
  • اضافه کردن...