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

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

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

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

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

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

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

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

۱۰

۱۱

background-image:url(image.png), -moz-linear-gradient(۲۷۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* FF3.6+ */

background-image:url(image.png), -webkit-gradient(linear, ۲۷۰deg, color-stop(۱۸%, #fff000), color-stop(۵۱%, #۵aff00), color-stop(۹۲%, #۰۰fffc));/* Chrome,Safari4+ */

background-image:url(image.png), -webkit-linear-gradient(۲۷۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* Chrome10+,Safari5.1+ */

background-image:url(image.png), -o-linear-gradient(۲۷۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* Opera 11.10+ */

background-image:url(image.png), -ms-linear-gradient(۲۷۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* IE10+ */

background-image:url(image.png), linear-gradient(۱۸۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* W3C */

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

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

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

background-repeat: no-repeat , repeat;

background-position: 180px 15px , top right;

background-repeat: no-repeat , repeat;

background-position: ۱۸۰px ۱۵px , top right;

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

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

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

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

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

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

حسین همت یار

ثبت دیدگاه

شما همچنین دوست خواهید

آیا سوالی دارید؟

پنل کاربران

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

جدیدترین آموزش ها

آخرین دیدگاه ها

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

اموزش تصادفی

خبرهای باحال دریافت کن

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین