آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

ترکیب Gradient با تصویر در background

ترکیب Gradient با تصویر در background

فصل چهارم : Properties در CSS

جلسه سوم  : ترکیب Gradient با تصویر در background

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در جلسه ی پیش در رابطه با Multiple Background صحبت کردیم . در این جلسه میخوام نحوه ترکیب چند تصویر و Gradient در پس زمینه رو بهتون آموزش بدم . این عمل هم مثل ترکیب چند تصویر هست که در جلسه ی پیش عنوان کردیم با این تفاوت که در اینجا ما Gradient هم استفاده می کنیم .

ابتدا برای ایجاد Gradient های دلخواه افزونه ی cssSir در فایرفاکس رو دانلود و نصب کنید . Gradient دلخواه خودتون رو ایجاد کنید و کد Gradient رو کپی کنید . (این ابزار تنها یکی از چندین ابزار موجود در این رابطه هست .)

خوب با ذکر مثال این آموزش رو جلو میبریم . به کد زیر توجه کنید :

 

در اینجا ما یک Gradient در پس زمینه قرار دادیم و یه تصویر هم روی Gradient در نظر گرفتیم . برای ترکیب تصاویر باید از background-image استفاده کنیم . تصاویری که قراره روی تمامی تصاویر قرار بگیره به ترتیب در ابتدا لحاظ می کنیم .

فکر می کنم با دیدن کد متوجه شده باشید که به چه صورت میتونید Gradient و تصویر رو ادغام کنید . ابتدا با url تصویر مورد نظر رو فراخوانی می کنید سپس کد Gradient رو قرار میدید . هر کد Gradient مخصوص به یک ورژن و یک مرورگر هست که باید هر کد رو در یک خط مجزا قرار بدید .

خوب حالا اگر بخواین برای تصاویرتون position  یا repeat تعیین کنید . بصورت زیر عمل می کنید :

 

به ترتیب برای هر تصویر یک repeat و یا position تعیین می کنیم . دقیقا به همون ترتیبی که در  background-image قرارشون دادیم . مثلا no-repeat برای تصویر هست و  repeatبرای Gradient هست یا position با  ۱۸۰px 15px رو برای تصویر و  position با  top right رو برای Gradient تعیین می کنیم .

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

 1

خوب دوستان این جلسه هم به اتمام رسید ، در صورتی که سوالی براتون پیش اومد مطرح کنید . در انتها میتونید فایل های این جلسه رو دریافت کنید.

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

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



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟