ترکیب 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

حسین همت یار

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

نظرسنجی

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

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

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

اموزش تصادفی