مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

جلسه ششم آموزش CSS: بررسی کامل background و خواص آن


سلام دوستان. در این قسمت می خواهیم به شما آموزش دهیم که چگونه برای تگ های مختلف html پس زمینه قرار دهید. شما می توانید با استفاده از ویژگی هایی که در ادامه ذکر می شود پس زمینه تگ های مختلف را به دلخواه خود تنظیم کنید:

  • ویژگی background-color برای تنظیم یک رنگ به عنوان پس زمینه استفاده می شود.
  • ویژگی background-image برای تنظیم یک تصویر به عنوان پس زمینه استفاده می شود.
  • ویژگی background- repeat برای کنترل تکرار یک تصویر در پس زمینه استفاده می شود.
  • ویژگی background- position برای کنترل موقعیت یک تصویر در پس زمینه استفاده می شود.
  • ویژگی background- attachment برای کنترل اسکرول یک تصویر در پس زمینه استفاده می شود.
  • ویژگی background برای تعیین چندین ویژگی پس زمینه به صورت یکجا مورد استفاده قرار می گیرد.
  1. تنظیم رنگ به عنوان پس زمینه

در ادامه طی مثالی به شما نشان داده می شود که چگونه یک رنگ را به عنوان پس زمینه قرار دهید.

<html>
   <head>
   <body>
      <p style = "background-color:yellow;">
      This text has a yellow background color.</p>
   </body>
   </head>
<html>

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

2. تنظیم یک تصویر به عنوان پس زمینه

برای فهمیدن این مورد به مثال زیر توجه کنید:

<html>
   <head>
      <style>
         body  {
            background-image: url("cat.jpg");
                     }
      </style>
      <body>
         <h1>Hello World!</h1>
      </body>
   </head>
<html>

و حالا نتیجه را مشاهده کنید:

همانطور که مشاهده می کنید تصویر یک گربه به عنوان تصویر زمینه انتخاب شده است.

2. تکرار تصویر زمینه

در مثال بعد شما را با نحوه تکرار کردن تصویر زمینه آشنا می کنیم. ما تصاویر زمینه به این دلیل تکرار می کنیم که بعضا تصاویر کوچک بوده و کل صفحه را پوشش نمی دهند و لذا ما می توانیم با تکرار تصویر زمینه کل صفحه را پوشش دهیم. البته دلایل دیگری نظیر تکرار یک الگو هم برای اینکار وجود دارد.
تکرار تصویر زمینه با استفاده از ویژگی background- repeat که دو مقدار repeat یا no-repeat را می گیرد، صورت می پذیرد. در صورتی که نخواهید تصویر زمینه تکرار شود باید مقدار را روی  no-repeat تنظیم کنید.
به طور پیشفرض مقدار background-repeat روی repeat قرار دارد.

<html>
   <head>
      <style>
         body {
            background-image: url("cat.jpg");
            background-repeat: no-repeat;
         }
      </style>
   </head>
   <body>
      <p> Hello World!</p>
   </body>
</html>

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

مثال بعدی به شما نشان می دهد که چطور تصویر زمینه را فقط به صورت عمودی تکرار کنید:
 

<html>
   <head>
      <style>
         body {
            background-image: url("cat.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>
   <body>
      <p> Hello World!</>
   </body>
</html>

نتیجه را مشاهده کنید:

مثال بعدی به شما نشان می دهد که چگونه تصویر زمینه را به صورت افقی تکرار کنید:

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   <body>
      <p> Hello World!</>
   </body>
</html>

نتیجه را ببینید:

4. تنظیم موقعیت تصویر پس زمینه

مثال زیر به شما نشان می دهد که چگونه موقعیت تصویر زمینه را با فاصله 100 پیکسل از سمت چپ تنظیم کنید:
 

<html>
   <head>
      <style>
         body {
            background-image: url("cat.jpg");
	    background-repeat: no-repeat;
            background-position:100px;
         }
      </style>
   </head>
   <body>
      <p> Hello World!</>
   </body>
</html>

نتیجه را در ادامه مشاهده می کنید:

در مثال بعدی موقعیت تصویر را 100 پیکسل از چپ و 200 پیکسل از بالا تنظیم خواهیم کرد.

<html>
   <head>
      <style>
         body {
            background-image: url("cat.jpg");
	    background-repeat: no-repeat;
            background-position:100px 200px;
         }
      </style>
   </head>
   <body>
      <p> Hello World!</>
   </body>
</html>

نتیجه را مشاهده کنید:

5. تنظیم ویژگی background-attachment

این ویژگی مشخص می کند که آیا یک تصویر پس زمینه نسبت به بقیه صفحه ثابت باشد یا همراه با آن ها حرکت کند. در مثال پایین یاد می گیرید که چگونه تصویر زمینه را ثابت کنید:

<!DOCTYPE html>
<html>
   <head>   
      <style>
         body  {
            background-image: url('cat.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>      
   </head>
   <body>   
            <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>     
   </body>
</html>

نتیجه را ببینید:

مثال بعدی به شما نشان می دهد که چگونه تصویر زمینه را تنظیم کنید که همراه با حرکت صفحه حرکت کند:

<!DOCTYPE html>
<html>
   <head>
   
      <style>
         body  {
            background-image: url('cat.jpg');
            background-repeat: no-repeat;
            background-attachment:scroll;
         }.
      </style>      
   </head>
   <body>   
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>
     <p>The background-image is scrolling. Try to scroll down the page.</p>      
   </body>
</html>

نتیجه را مشاهده کنید:

6. تنظیم همزمان چندین ویژگی پس زمینه

شما می توانید با استفاده از ویژگی background موارد گفته شده در بالا را در یک دستور CSS اجرا کنید. به عنوان مثال:

<p style="background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

این فصل در یک نگاه:

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …
فصلِ: 5 , تعداد قسمت ها: 135 , سطح: صفر تا صد

این فصل در یک نگاه:

توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
فصلِ: 4 , تعداد قسمت ها: 294 , سطح: صفر تا صد
موضوعات: آموزش CSS

این فصل در یک نگاه:

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

  آموزش صفر تا صد CSS , CSS3         فصل ۱  توضیحات : مسیری که در این جا برای شما دوستان چندیم با دید شبکه ای و سیستمی چینده شده است . شما در این مسیر از نقطه صفر شروع می کنید و…
فصلِ: 1 , تعداد قسمت ها: 20 , سطح: متوسط

این فصل در یک نگاه:

  Blazor فریمورک معرفی شده از سوی مایکروسافت برای ساخت صفحات SPA با استفاده از زبان سی شارپ میباشد!!!      بله درست شنیدید ساخت صفحات وب با استفاده از سی شارپ از این به بعد ممکن خواهد …
فصلِ: 2 , تعداد قسمت ها: 5 , سطح: صفر تا صد

این فصل در یک نگاه:

اموزش کدنویسی html و css- اموزش تبدیل psd به html و css…

توضیحات کلی مجموعه: این دوره یک دوره تکمیلی برای کاربران فتوشاپ کلیک سایت می باشد که قصد دارن تا به دنیای وب نویسی وارد شوند. دوستانی که اکنون تسلط لازم به فتوشاپ را دارند میتوانند با اشنای…
فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 28 , تعداد قسمت ها: 253 , سطح: صفر تا صد

این فصل در یک نگاه:

آشنایی با امکانات جدید لاراول ۷…

برخی از سرفصل های این پکیج آموزشی :   لاراول چیست و چرا ما لاراول استفاده میکنیم کامپوزر کارش چیه و نصب اون نصب لاراول آموزش نصب لاراول از طریق اینستالر آموزش نصب لاراول با استفاده ا…
فصلِ: 9 , تعداد قسمت ها: 215 , سطح: صفر تا صد

این فصل در یک نگاه:

در اصل فصل در مورد performance صحبت خواهیم کرد :-React Performance-Lazy-Error Boundaries و سایت را بر روی هاست واقعی قرا…

با سلام خدمت کلیک سایتی های عزیز، به دوره ی صفر تا صد طراحی سایت با react js خوش آمدید. نکته:این دوره کاملا پروژه محور میباشد نکته:این دوره هیچ پیش نیازی ندارد ReactJS  چیست؟ ReactJS اس…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

این فصل در یک نگاه:

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

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 8 , تعداد قسمت ها: 77 , سطح: صفر تا صد

این فصل در یک نگاه:

  پیشنهاد میکنیم دمو دوره رو حتما مشاهده کنید با سلام خدمت دوستان عزیز . ابتدا عرض کنم که این دوره برای دوستانی آماده شده که میخوان وب اپلیکیشن های مدرنی رو طراحی بکنن و وارد بازار کار ط…
فصلِ: 5 , تعداد قسمت ها: 201 , سطح: صفر تا صد

این فصل در یک نگاه:

ایجاد پروژه آژانس مسافرتی.....…

فصل اول: آشنایی با مبانی برنامه نویسی اندروید   آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
فصلِ: 1 , تعداد قسمت ها: 2 , سطح: متوسط

این فصل در یک نگاه:

بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…

  وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ   اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

این فصل در یک نگاه:

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

 اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
فصلِ: 10 , تعداد قسمت ها: 47 , سطح: صفر تا صد

این فصل در یک نگاه:

کار نیرو-کار کوپل-اصل کار مجازی و کاربرد-بازده مکانیکی-کار نیرو در جا به جایی محدود-انرژی پتانسیل-انرژی پتانسیل و حالت ت…

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

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید