فصل چهارم : Properties در CSS
جلسه سوم : ترکیب Gradient با تصویر در background
سلام به همراهان همیشگی مدرسه مجازی ایرانیان
در جلسه ی پیش در رابطه با Multiple Background صحبت کردیم . در این جلسه میخوام نحوه ترکیب چند تصویر و Gradient در پس زمینه رو بهتون آموزش بدم . این عمل هم مثل ترکیب چند تصویر هست که در جلسه ی پیش عنوان کردیم با این تفاوت که در اینجا ما Gradient هم استفاده می کنیم .
ابتدا برای ایجاد Gradient های دلخواه افزونه ی cssSir در فایرفاکس رو دانلود و نصب کنید . Gradient دلخواه خودتون رو ایجاد کنید و کد Gradient رو کپی کنید . (این ابزار تنها یکی از چندین ابزار موجود در این رابطه هست .)
خوب با ذکر مثال این آموزش رو جلو میبریم . به کد زیر توجه کنید :
|
1 2 3 4 5 6 7 8 9 10 11 |
background-image:url(image.png), -moz-linear-gradient(270deg, #fff000 18%, #5aff00 51%, #00fffc 92%);/* FF3.6+ */ background-image:url(image.png), -webkit-gradient(linear, 270deg, color-stop(18%, #fff000), color-stop(51%, #5aff00), color-stop(92%, #00fffc));/* Chrome,Safari4+ */ background-image:url(image.png), -webkit-linear-gradient(270deg, #fff000 18%, #5aff00 51%, #00fffc 92%);/* Chrome10+,Safari5.1+ */ background-image:url(image.png), -o-linear-gradient(270deg, #fff000 18%, #5aff00 51%, #00fffc 92%);/* Opera 11.10+ */ background-image:url(image.png), -ms-linear-gradient(270deg, #fff000 18%, #5aff00 51%, #00fffc 92%);/* IE10+ */ background-image:url(image.png), linear-gradient(180deg, #fff000 18%, #5aff00 51%, #00fffc 92%);/* W3C */ |
در اینجا ما یک Gradient در پس زمینه قرار دادیم و یه تصویر هم روی Gradient در نظر گرفتیم . برای ترکیب تصاویر باید از background-image استفاده کنیم . تصاویری که قراره روی تمامی تصاویر قرار بگیره به ترتیب در ابتدا لحاظ می کنیم .
فکر می کنم با دیدن کد متوجه شده باشید که به چه صورت میتونید Gradient و تصویر رو ادغام کنید . ابتدا با url تصویر مورد نظر رو فراخوانی می کنید سپس کد Gradient رو قرار میدید . هر کد Gradient مخصوص به یک ورژن و یک مرورگر هست که باید هر کد رو در یک خط مجزا قرار بدید .
خوب حالا اگر بخواین برای تصاویرتون position یا repeat تعیین کنید . بصورت زیر عمل می کنید :
|
1 2 3 |
background-repeat: no-repeat , repeat; background-position: 180px 15px , top right; |
به ترتیب برای هر تصویر یک repeat و یا position تعیین می کنیم . دقیقا به همون ترتیبی که در background-image قرارشون دادیم . مثلا no-repeat برای تصویر هست و repeatبرای Gradient هست یا position با ۱۸۰px 15px رو برای تصویر و position با top right رو برای Gradient تعیین می کنیم .
نتیجه ی کدهایی که نوشتیم به شکل زیر خواهد بود :
خوب دوستان این جلسه هم به اتمام رسید ، در صورتی که سوالی براتون پیش اومد مطرح کنید . در انتها میتونید فایل های این جلسه رو دریافت کنید.
تهیه شده در مدرسه مجازی ایرانیان
دریافت فایل
دیدگاه های مخاطبین
لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.