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

برای تنظیم پس زمینه در HTML از DOCTYPE میانی استفاده کنید

و من با این واقعیت شروع می کنم که در HTML5تنظیم آن ممکن نیست. تصمیم گرفته شد که این ویژگی به CSS اضافه شود. بنابراین، اگر قصد دارید از موارد زیر استفاده کنید و می خواهید کد معتبر (صحیح) دریافت کنید، باید نوع سند انتقالی را انتخاب کنید. برای انجام این کار، صفحه وب شما باید با خط زیر شروع شود:

انتقالی//EN" "http://www.w3.org/TR/html4/loose.dtd">

با وجود این موضوع، بیایید به درک چگونگی ایجاد پس‌زمینه برویم. و اولین چیزی که در اینجا باید به آن توجه کرد تفاوت بین آنهاست رنگ پس زمینهو تصویر پس زمینه. در ابتدا می رود رنگ پس زمینه، که کل فضای موجود صفحه یا عنصر آن را پر می کند. روکش شده در بالای آن یک تکرار است تصویر پس زمینه. از نظر بصری این را می توان به صورت زیر نشان داد:

پس زمینه یک سند HTML و عناصر آن

دومین چیزی که باید بدانید تفاوت بین آنهاست بدنه سندو عنصر سند. بدنه سنددر کد HTML یک صفحه وب با تگ BODY نشان داده می شود که شامل کل محتوای صفحه وب است. بدیهی است که پیشینه بدنه سند نمی تواند شفاف باشد. اگر پس‌زمینه بدنه سند مشخص نشده باشد، از مقدار پیش‌فرض مشخص‌شده در تنظیمات مرورگر استفاده می‌شود.

عناصر صفحهداخل تگ BODY هستند. قابل ذکر است که امکان تنظیم رنگ و/یا تصویر پس زمینه با استفاده از HTML برای همه عناصر سند وجود ندارد. به عنوان مثال، یک تصویر پس زمینه فقط برای جداول قابل تعیین است. به طور پیش فرض، آنها معمولا یک پس زمینه شفاف دارند.

ویژگی bgcolor برای ایجاد رنگ پس زمینه

برای پرسیدن رنگ پس زمینهسند یا عناصر آن از ویژگی bgcolor استفاده می کنند، به عنوان مثال:

در این حالت، رنگ پس‌زمینه را برای کل صفحه تنظیم می‌کنیم. و در اینجا مثالی از نحوه تنظیم رنگ پس زمینه برای یک جدول در تگ TABLE آورده شده است:

قابل ذکر است که رنگ پس زمینه در جدول را می توان برای هر دو ردیف در تگ TR و برای سلول های آنها در تگ TD مشخص کرد.

چگونه کد رنگ را بفهمیم؟

احتمالاً قبلاً متوجه شده اید که رنگ در HTML روی یک خاص تنظیم شده است کدبه عنوان مثال: #ec008c. برای اینکه کد رنگ مورد نیاز خود را پیدا کنید، می توانید از یکی از ویرایشگرهای گرافیکی استفاده کنید. به عنوان مثال، در فتوشاپ می توانید از " ابزار قطره چشم» (پیپت) برای به دست آوردن رنگ از نقطه ای در تصویر. سپس، باید روی رنگ به دست آمده در نوار ابزار و در پنجره ای که باز می شود کلیک کنید. انتخاب کننده رنگ» (انتخاب رنگ) کد رنگ را کپی کنید.

لطفاً توجه داشته باشید که این کد در ابتدا علامت پوند (#) نخواهد داشت، این علامت باید به صورت دستی اضافه شود.

همچنین می توانید از خدمات آنلاین متعددی استفاده کنید، به عنوان مثال:

• و غیره.

اصل کار آنها حتی ساده تر است - روی رنگ مورد نظر کلیک کنید و کد آن را دریافت کنید.

ویژگی پس زمینه برای ایجاد یک تصویر پس زمینه

همانطور که در مورد رنگ پس زمینه، و در مورد تصویر پس زمینهشما باید از یک ویژگی خاص استفاده کنید، به عنوان مثال:

در این مورد، ما یک تصویر پس زمینه برای صفحه به عنوان یک کل تنظیم می کنیم. قابل ذکر است که به دلیل محدودیت در اندازه تصویر تکرار می شود مثلا:

همانطور که می بینید، هنگام تکرار، انتقال بین تصاویر قابل توجه است. بنابراین اغلب از تصاویر ویژه ای استفاده می شود که این نکته در نظر گرفته شود.

و در اینجا مثالی از نحوه تنظیم یک تصویر پس زمینه برای یک جدول در تگ TABLE آورده شده است:

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

مسیر مطلق و نسبی به تصویر پس زمینه

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

در این صورت هیچ مشکل مرتبطی نخواهید داشت. می توانید در این مورد بیشتر بخوانید.

بیایید آن را جمع بندی کنیم

استفاده از ویژگی های bgcolor و پس زمینه منسوخ شده است، بنابراین برای اعتبار کد HTML باید از DOCTYPE انتقالی استفاده کنید. برای تنظیم رنگ پس‌زمینه در HTML از کدهای خاصی استفاده می‌کند که می‌توانید در ویرایشگر گرافیکی یا با استفاده از سرویس‌های آنلاین ویژه آن را پیدا کنید. تصویر پس زمینه در ناحیه اختصاص داده شده به آن کپی شده و در بالای رنگ پس زمینه قرار دارد. برای تعیین تصویر پس زمینه بهتر است از URL کامل آن استفاده کنید. این تمام چیزی است که من دارم. با تشکر از توجه شما. موفق باشید!

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

ایجاد پس زمینه جدید برای وب سایت ها

برای تکمیل کار، می توانید از یکی از 4 روش استفاده کنید:

• 1. زمینه با یک رنگ
• 2. پس زمینه با بافت
• 3. پس زمینه با استفاده از گرادیان
• 4. پس زمینه از یک تصویر بزرگ

با استفاده از یک رنگ یک پس زمینه ایجاد کنید

برای ایجاد یا تغییر پس زمینه سایت که از یک رنگ تشکیل شده است، باید به فایل مورد نظر بروید style.css، که در آن مقدار - بدنه را پیدا کنید (مسئول بدنه اصلی سایت است). اکنون باید تابع پس زمینه رنگ را در صورتی که وجود نداشت ثبت کنید و کد رنگ را مشخص کنید. در مواردی که نیاز به ایجاد یک پس زمینه سفید برای یک وب سایت دارید، باید کد زیر را بنویسید:

پس زمینه رنگ: #83C5E9 ; (پس زمینه آبی، مانند مثال)

شما می توانید یک لیست کامل از رنگ ها را در وب سایت پیدا کنید - (STM). برای تغییر رنگ کافیست مقدار بعد از کولون را تغییر دهید و از تلاش خود لذت ببرید.

ایجاد پس زمینه با استفاده از بافت

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

پس زمینه رنگ: #537759;

background-image: url(images/pattern.png);

این کد حاوی یک پارامتر آشنا برای حفظ رنگ (سبز است) و عنصری است که وظیفه اتصال بافت سبز را بر عهده دارد.

ساخت پس زمینه با استفاده از گرادیان

هر تصویری که با استفاده از توابع css متصل شده باشد را می توان به صورت افقی و عمودی (در امتداد محورها) تکرار کرد. ایکسو Y). این فرصت به ما این امکان را می دهد که هر پس زمینه ساده ای را برای سایت با دستان خود ایجاد کنیم. برای انجام این کار، باید یک گرادینت با عرض ۱ مگاپیکسل ایجاد کنید (تصویر زیر را ببینید)، آن را به عنوان تصویر ذخیره کنید و در هاست خود آپلود کنید. پس از این، می توانید کد لازم را بنویسید، یعنی:

پس زمینه رنگ: #83C5E9;

پس زمینه-تصویر: url(images/gradient.jpg);

background-repeat: repeat-x;

در این مجموعه به ترتیب اولویت تابعی برای رنگ پس زمینه وجود دارد که برای بیمه اتکایی از آن استفاده می کنیم. پس از این، پارامتری که وظیفه اتصال گرادیان را بر عهده دارد و در نهایت تابعی که وظیفه تکرار گرادیان را در امتداد محور X دارد.

استفاده از یک تصویر بزرگ برای پس زمینه وب سایت

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

پس زمینه رنگ: #000000;

پس زمینه-تصویر: url(تصاویر/تصویر عنوان.jpg);

موقعیت پس زمینه: بالای مرکز.

background-repeat: no-repeat;

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

تغییر پس زمینه در وب سایت های ucoz

آن روش‌های ایجاد پس‌زمینه برای یک سایت را می‌توان در سیستم‌های مدیریت محتوای مختلف استفاده کرد، اما نه در سایت‌ها - ucoz. برای تغییر پس زمینه وب سایت ucoz باید به کنترل پنل سایت بروید، به "مدیریت طراحی"، و سپس در "ویرایش الگوها".

اکنون باید Style Sheet (CSS) را باز کنید، خط را پیدا کنید "بدن"و پارامتر "زمینه". پس از این، باید لینک را کپی کنید، آن را در مرورگر اینترنت خود قرار دهید و به تصویری که پس زمینه بود دسترسی خواهید داشت.

برای استفاده از پس‌زمینه جدید، فقط باید آن را در مدیر فایل آپلود کنید. در عین حال مطمئن شوید که نام تصویر پس زمینه جدید مانند قبل از تغییر باشد. کار خود را ذخیره کنید و برای مشاهده کارهای انجام شده به وب سایت بروید.

تغییر پس زمینه سایت به HTML

اگر می‌خواهید پس‌زمینه یک سایت html را با استفاده از یک تصویر ایجاد کنید، به سادگی خط کد را وارد کنید:

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

این داستان ما را به پایان می رساند. اکنون می دانید که چگونه یک پس زمینه برای یک وب سایت ایجاد کنید. پروژه های مبارک!

هر اتاقی اگر کف آن با فرش گران قیمت ایرانی پوشانده شود بسیار بهتر به نظر می رسد. پس چرا وب سایت شما بدتر است؟ شاید وقت آن رسیده باشد که کف آن را با یک فرش دستباف گران قیمت و زیبا بپوشانیم. بیایید نگاهی دقیق تر به نحوه ایجاد پس زمینه برای یک وب سایت بیندازیم:

پس زمینه برای سایت

این اتفاق می افتد که طراحی وب سایت قدیمی خسته کننده شده است. و من یک چیز جدید و خوشمزه می خواهم. و اگر خودتان آن را بسازید، طرح جدید همان خواهد بود.

اما تغییر کامل طراحی یک منبع به تنهایی کار بی‌شکری است. و دست همه برای این کار به درستی آموزش داده نشده است. بنابراین، ساده‌ترین راه برای به‌روزرسانی یک قالب قدیمی، تغییر رنگ پس‌زمینه منبع یا تصویر پس‌زمینه آن است.

روش های مختلفی برای تغییر پس زمینه یک وب سایت وجود دارد. برای این کار از قابلیت های CSS یا html استفاده می شود. اما بسیاری از ویژگی‌های کار با پس‌زمینه، در این فناوری‌های وب به همین نام و روش کاربرد دارند.

اصول کار با پس زمینه در html

چندین عنصر را می توان به عنوان پس زمینه استفاده کرد:

• رنگ؛
• تصویر پس زمینه؛
• تصویر بافت.

بیایید استفاده از هر یک از آنها را با جزئیات بیشتری بررسی کنیم.

برای تنظیم رنگ پس زمینه برای یک سایت، از ویژگی background-color ویژگی style استفاده کنید. یعنی برای تنظیم رنگ اصلی یک صفحه وب باید آن را در داخل تگ بنویسید . مثلا:

پس زمینه وب سایت #55D52B

علاوه بر کد رنگ هگزا دسیمال، یک مقدار در قالب کلمه کلیدی یا RGB پشتیبانی می شود. مثال ها:

پس زمینه وب سایت rgb (23,113,44)

پس زمینه وب سایت سبز

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

HTML تنها از 16 کلمه کلیدی برای تنظیم رنگ ها پشتیبانی می کند. در اینجا تعداد کمی از آنها هستند: سفید، قرمز، آبی، سیاه، زردو دیگران.

بنابراین برای تنظیم پس زمینه یک سایت html بهتر است از فرمت هگزادسیمال یا RGB استفاده کنید.

علاوه بر انتخاب رنگ، گزینه های سفارشی سازی دیگری نیز موجود است. اگر ویژگی background-color روی شفاف تنظیم شود، پس‌زمینه صفحه شفاف می‌شود. این مقدار به طور پیش فرض به این ویژگی اختصاص داده شده است.

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

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

فرض کنید ما در حال توسعه یک وب سایت در مورد شعر هستیم و باید از تصویری از Pegasus به عنوان پس زمینه استفاده کنیم. اسب بالدار آزادی اندیشه خلاق شاعر را به تصویر می کشد!

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

شاید چهار اسب خندان با بال برای شاعران الهام بخش باشد. بنابراین، ما شبیه سازی پگاسوس خود را ممنوع می کنیم. ما این کار را با استفاده از ویژگی background-repeat انجام می دهیم. مقادیر ممکن:

• تکرار-x – تصویر پس زمینه را به صورت افقی تکرار کنید.
• تکرار-y - به صورت عمودی.
• تکرار - در هر دو محور؛
• بدون تکرار - تکرار ممنوع است.

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

اما، البته، اگر فلایر ما در وسط صفحه قرار می گرفت، بهتر بود. ویژگی background-position دقیقاً برای قرار دادن تصویر پس زمینه در صفحه در نظر گرفته شده است. شما می توانید مختصات مکان را به چند روش تنظیم کنید:

• کلمه کلیدی ( بالا، پایین، مرکز، چپ، راست);
• درصد - شمارش از گوشه سمت چپ بالا شروع می شود.
• بر حسب واحد اندازه گیری (پیکسل).

بیایید از ساده ترین گزینه وسط استفاده کنیم:

این اتفاق می افتد که شما باید موقعیت یک عکس را هنگام پیمایش ثابت کنید. بنابراین، قبل از ایجاد تصویر به عنوان پس‌زمینه سایت، از ویژگی خاص background-attachment استفاده کنید. مقادیری که می پذیرد عبارتند از:

• طومار؛


• درست شد.

ما به آخرین مقدار نیاز داریم. حالا کد مثال ما به شکل زیر خواهد بود:

پس زمینه بافت وب سایت

در مثال اول از یک منظره بیابانی بزرگ و زیبا برای پس زمینه استفاده کردیم. اما برای چنین زیبایی باید به طور کامل پرداخت کنید. وزن یک تصویر ساخته شده با کیفیت بالا می تواند به چندین مگابایت برسد.

این حجم به هیچ وجه بر سرعت بارگذاری صفحه مرورگر با اتصال به اینترنت پرسرعت تأثیر نمی گذارد. اما در مورد اینترنت تلفن همراه چه می شود، هنگام استفاده از آن، بارگیری چندین "متر" زمان زیادی می برد؟

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

برای ایجاد یک پس زمینه تاریک برای سایت، به فتوشاپ بروید، یک تصویر به شکل یک نوار به طول 1200 پیکسل و عرض 15 پیکسل ایجاد کنید. سپس یک گرادیان سیاه و سفید ساده اعمال می کنیم و بافت حاصل را به صفحه سایت متصل می کنیم:

ابزارهای CSS

تمام خصوصیاتی که در بالا توضیح داده شد در مورد برگه های سبک آبشاری نیز اعمال می شود. بیایید با بازنویسی کد یکی از نمونه های قبلی، یک پس زمینه وب سایت css ایجاد کنیم.

بسیاری از طراحان چیدمان مبتدی، که فقط به جوهره ایجاد وب سایت می پردازند، اغلب تعجب می کنند که چگونه پس زمینه را به یک تصویر در html تبدیل کنند. و حتی اگر برخی از افراد بتوانند این کار را بفهمند، باز هم هنگام کشیده شدن تصویر در کل عرض مانیتور مشکلاتی ایجاد می شود. در عین حال، من می خواهم که سایت در همه مرورگرها به طور یکسان نمایش داده شود، بنابراین نیاز به مرورگر متقابل باید برآورده شود. شما می توانید پس زمینه را به دو روش تنظیم کنید: با استفاده از سبک CSS. هر کس بهینه ترین گزینه را برای خود انتخاب می کند. البته سبک CSS بسیار راحت‌تر است، زیرا کد آن در یک فایل جداگانه ذخیره می‌شود و ستون‌های اضافی را در تگ‌های اصلی سایت نمی‌گیرد، اما ابتدا به یک روش ساده برای تنظیم یک تصویر در پس زمینه سایت

تگ های اصلی HTML برای ایجاد پس زمینه

بنابراین، اجازه دهید به سؤال، پس‌زمینه در html در کل صفحه برویم. برای اینکه سایت زیبا به نظر برسد، باید یک جزئیات نسبتاً مهم را درک کنید: کافی است فقط یک پس زمینه گرادیان ایجاد کنید یا آن را با رنگ ثابت رنگ کنید، اما اگر نیاز به درج تصویر در پس زمینه داشته باشید، کشیده نمی شود. در تمام عرض مانیتور در ابتدا باید با پسوندی که صفحه سایت شما در آن نمایش داده می شود، تصویری را انتخاب کنید یا طرحی را خودتان بسازید. فقط پس از آماده شدن تصویر پس زمینه، آن را به پوشه ای به نام "تصاویر" منتقل کنید. در آن ما تمام تصاویر، انیمیشن ها و سایر فایل های گرافیکی مورد استفاده خود را ذخیره می کنیم. این پوشه باید در دایرکتوری ریشه تمام فایل های html شما باشد. حالا می توانید به سراغ کد بروید. چندین گزینه برای نوشتن کد وجود دارد که پس‌زمینه را به تصویر تغییر می‌دهد.

1. ویژگی تگ را بنویسید
2. از طریق سبک CSS در کد HTML.
3. استایل CSS را در یک فایل جداگانه بنویسید.

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

1. اولین راه برای نوشتن از طریق ویژگی تگ (body) در فایل index.htm است. به شکل زیر نوشته شده است: (body background= "Folder_name/Image_name.extension")(/body). یعنی اگر عکسی با نام "تصویر" و پسوند JPG داشته باشیم و نام پوشه را "Images" بگذاریم، ورودی کد HTML به این صورت خواهد بود: (body background="Images/Picture.jpg") … (/بدن) .
2. روش دوم ضبط بر سبک CSS تأثیر می گذارد، اما در همان فایلی به نام index.htm نوشته می شود. (body style="background: url("../Images/Picture.jpg")").
3. و روش سوم ضبط در دو فایل ساخته می شود. در سندی به نام index.htm خط زیر نوشته شده است: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). و در فایل سبک به نام style.css قبلاً می نویسیم: body (پس زمینه: url(Images/Picture.jpg")).

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

راه هایی برای کشش تصویر پس زمینه به عرض پنجره

بیایید صفحه نمایش خود را به صورت درصد تصور کنیم. به نظر می رسد که کل عرض و طول صفحه نمایش 100٪ در 100٪ خواهد بود. باید تصویر را به این عرض بکشیم. بیایید یک خط به ورودی تصویر در فایل style.css اضافه کنیم که تصویر را به کل عرض و طول مانیتور کشیده می‌کند. چگونه این به سبک CSS نوشته شده است؟ ساده است!

پس زمینه: url (Images/Picture.jpg")

پس زمینه اندازه: 100%; /* این ورودی برای اکثر مرورگرهای مدرن مناسب است */

بنابراین ما متوجه شدیم که چگونه یک تصویر را به عنوان پس زمینه در html بسازیم تا کل صفحه را پر کند. همچنین راهی برای نوشتن در فایل index.htm وجود دارد. اگرچه این روش منسوخ شده است، اما دانستن و درک آن برای مبتدیان ضروری است. در تگ (head)(style) div (background-size: cover; ) (/style) (/head)، این ورودی به این معنی است که ما یک بلوک ویژه برای پس زمینه اختصاص می دهیم که در کل عرض آن قرار می گیرد. پنجره ما به دو روش برای تبدیل پس‌زمینه یک وب‌سایت به یک تصویر HTML نگاه کردیم تا تصویر در تمام عرض صفحه در هر مرورگر مدرنی کشیده شود.

چگونه یک پس زمینه ثابت بسازیم

اگر تصمیم دارید از یک تصویر به عنوان پس زمینه یک منبع وب آینده استفاده کنید، فقط باید دریابید که چگونه آن را بی حرکت کنید تا از نظر طول کشیده نشود و ظاهر زیبایی شناختی را خراب نکند. نوشتن این اضافه کوچک با کمک به اندازه کافی آسان است. شما باید یک عبارت را در فایل style.css پس از پس‌زمینه اضافه کنید: url(Images/Picture.jpg") ثابت شد؛ یا به جای آن یک خط جداگانه بعد از نقطه ویرگول - موقعیت: ثابت اضافه کنید. بنابراین، تصویر پس‌زمینه شما بی حرکت خواهد شد. با پیمایش در محتوای سایت، خواهید دید که خطوط متن حرکت می‌کنند، اما پس‌زمینه در جای خود باقی می‌ماند. بنابراین شما یاد گرفته‌اید که چگونه پس‌زمینه را به صورت html به روش‌های مختلف تبدیل به تصویر کنید.

کار با جدول در HTML

بسیاری از توسعه دهندگان وب بی تجربه، وقتی با جداول و بلوک ها مواجه می شوند، اغلب نمی دانند که چگونه یک تصویر را به عنوان پس زمینه جدول در HTML بسازند. مانند تمام سبک های CSS، این زبان برنامه نویسی وب بسیار ساده است. و راه حل چنین مشکلی نوشتن چند خط کد خواهد بود. باید بدانید که نوشتن سطرها و ستون های جدول به ترتیب به عنوان تگ های (tr) و (td) شناخته می شود. برای اینکه پس‌زمینه جدول به شکل تصویر باشد، باید یک عبارت ساده به تگ (table)، (tr) یا (td) اضافه کنید که نشان‌دهنده پیوند تصویر است: پس‌زمینه = URL تصویر. برای وضوح، اجازه دهید چند مثال بزنیم.

جداول دارای تصویر به جای پس زمینه: نمونه های HTML

بیایید یک جدول 2x3 بکشیم و پس‌زمینه آن را به صورت تصویر ذخیره‌شده در پوشه «تصاویر» تبدیل کنیم: (پس‌زمینه جدول = «Images/Picture.jpg») (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/جدول). به این ترتیب جدول ما در پس زمینه تصویر نقاشی می شود.

حالا بیایید همان صفحه را با ابعاد 2x3 بکشیم، اما یک تصویر را در ستون های شماره 1، 4، 5 و 6 قرار دهیم. )2 (/td) (td)3(/td)(/tr) (tr)(td background = "Images/Picture.jpg")4(/td) (td background = "Images/Picture.jpg") 5 ( /td) (td پس زمینه = "Images/Picture.jpg")6(/td) (/tr) (/table). پس از مشاهده، می بینیم که پس زمینه فقط در سلول هایی که در آنها ثبت نام کرده ایم ظاهر می شود و نه در کل جدول.

سازگاری بین مرورگرهای سایت

همچنین چیزی به عنوان سازگاری بین مرورگر یک منبع وب وجود دارد. این بدان معنی است که صفحات سایت در انواع و نسخه های مختلف مرورگرها به طور یکسان به درستی نمایش داده می شوند. در این مورد، باید کد HTML و سبک CSS را با مرورگرهای مورد نیاز تنظیم کنید. علاوه بر این، در عصر مدرن توسعه گوشی‌های هوشمند، بسیاری از توسعه‌دهندگان وب در تلاش هستند تا سایت‌هایی ایجاد کنند که هم برای نسخه‌های موبایل و هم برای نمایش رایانه‌ها مناسب باشند.

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

ویژگی COLOR

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

• نام رنگ (سبز، سیاه، قرمز...)؛
• کد رنگ هگزادسیمال (008000, 000000, FF0000...);
• کد رنگ اعشاری در RGB (رنگ: rgb (40، 175، 250))؛

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

همانطور که قبلاً اشاره کردم، می توانید تقریباً برای همه عناصر یک رنگ تنظیم کنید، اینها می توانند (H1... H6)، (strong، em) و حتی اعداد صحیح (p) و حتی حاشیه های جدول باشند، اما در ادامه بیشتر در مورد آن صحبت خواهیم کرد.

بیایید به مثالی از تنظیم رنگ متن با استفاده از CSS نگاه کنیم:

h1 (رنگ: آبی)

در این مثال، تمام عناوین سطح اول صفحه وب آبی خواهند بود:

قوی (رنگ: قرمز)

در این صورت هر آنچه در متن صفحه وجود دارد با تگ هایلایت می شود قوی، قرمز می شود.

می توانید آن را اینگونه بنویسید:

h1، p، قوی (رنگ: سبز)

سپس سرفصل‌های سطح اول، تمام پاراگراف‌ها و هر چیزی که با یک برچسب مشخص شده است سبز می‌شود.

هنگامی که لازم است سرفصل ها با رنگ های مختلف برجسته شوند، از انتخابگرهای کلاس استفاده می شود. برای تعریف یک کلاس در HTML از ویژگی استفاده می شود کلاس، که می تواند برای هر عنصری اعمال شود. در کد HTML باید بنویسید:

class="Blue" > رنگ هدر این کلاس آبی خواهد بود

در شیوه نامه CSS، در این مورد، یک قانون می نویسیم که در آن انتخابگر عنصر H1 خواهد بود و از طریق نقطه ( . ) نام کلاس:

h1.آبی (رنگ: آبی)

در اسناد HTML، انتخابگرها بر اساس شناسه نیز استفاده می‌شوند که توسط ویژگی تعیین می‌شوند شناسه. یک شناسه یک ویژگی مهم یا اولویت دارتر از یک کلاس است. و اگر هر دو کلاس و شناسه برای عنصری در کد HTML مشخص شده باشند، سبک شناسه اعمال خواهد شد. شناسه با یک علامت هش نشان داده می شود ( # ). برای استفاده از شناسه در کد HTML، باید بنویسید:

id="آبی" > رنگ هدر این شناسه آبی خواهد بود

در شیوه نامه به نوبه خود:

h1#آبی (رنگ: آبی)

ویژگی BACKGROUND-COLOR

این ویژگی به شما امکان می دهد رنگ پس زمینه را برای صفحه به عنوان یک کل، یک پاراگراف، یک پیوند یا به طور کلی برای هر عنصر HTML تنظیم کنید. برای انجام این کار، مقدار ویژگی یک رنگ یا مقدار را مشخص می کند شفاف(شفاف). کد برای پس زمینه صفحه نوشته شده است:

بدنه (رنگ پس زمینه: آبی)

در این صورت پس زمینه صفحه فیروزه ای می شود و برای دادن پس زمینه به هدر می نویسیم:

h1 (رنگ پس زمینه: زرد)

ما یک پس زمینه زرد برای سرفصل های سطح اول دریافت می کنیم.

رنگ و پس زمینه در CSS

ویژگی Background-REPEAT

این ویژگی زمانی استفاده می شود که تعیین شود آیا به صورت افقی و عمودی تکرار می شود یا خیر. مقادیر معتبر:

• تکرار- تصویر به صورت عمودی و افقی تکرار می شود.
• تکرار-x- تصویر فقط به صورت افقی تکرار می شود.
• تکرار y- تصویر فقط به صورت عمودی تکرار می شود.
• بدون تکرار- تصویر تکرار نمی شود.

کد به این صورت نوشته شده است:

پ(
تصویر پس زمینه: url( آدرس فایل تصویری) ;
background-repeat : repeat-x
}

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

اموال BACKGROUND-ATTACHMENT

این ویژگی برای نشان دادن اینکه آیا تصویر پس‌زمینه صفحه باید همراه با متن پیمایش کند یا نه به مرورگر استفاده می‌شود ( طومار) یا بی حرکت بمانید ( درست شد).

بدن (
تصویر پس زمینه: url( آدرس فایل تصویری) ;
background-repeat : repeat-x ;
پس‌زمینه پیوست: ثابت شد
}

در این حالت تصویر پس زمینه بدون حرکت باقی می ماند.

ویژگی BACKGROUND-POSITION

این ویژگی برای قرار دادن تصویر نسبت به . مقادیر بر حسب درصد (%)، واحد طول (cm، px)، با کلمات کلیدی مشخص می‌شوند:

• به صورت عمودی:
• بالا- بالای تصویر با لبه بالای صفحه یا بلوک تراز شده است.
• مرکز
• پایین- پایین تصویر با لبه پایین صفحه یا بلوک تراز شده است.
• به صورت افقی:
• ترک کرد- لبه سمت چپ تصویر با لبه سمت چپ صفحه یا بلوک تراز شده است.
• مرکز- مرکز تصویر با مرکز صفحه یا بلوک تراز شده است.
• درست- لبه سمت راست تصویر با لبه سمت راست صفحه یا بلوک تراز شده است.

ما یک کد نمونه را در درصد، واحد طول و کلمات کلیدی می نویسیم:

بدن (
تصویر پس زمینه: url( آدرس فایل تصویری) ;
موقعیت پس زمینه: 0% 0%
}

بدن (
تصویر پس زمینه: url( آدرس فایل تصویری) ;
موقعیت پس زمینه: 10 پیکسل 25 سانتی متر
}

بدن (
تصویر پس زمینه: url( آدرس فایل تصویری) ;
پس زمینه موقعیت: مرکز بالا
}