نحوه قرار دادن تصویر در پس زمینه در html. برای تنظیم پس زمینه در HTML از DOCTYPE متوسط ​​استفاده کنید

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

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

ابتدا رنگ پس‌زمینه‌تان را تغییر دهید، زیرا افرادی که اینترنت کندی دارند نمی‌توانند بلافاصله تصویر پس‌زمینه سایت را ببینند. برای مدت زمان مشخصی، در حالی که تصویر در حال بارگذاری است، آنها فقط می توانند رنگ سایت شما را ببینند.
در تگ وارد کنید پارامتر bgcolor=”*****” که در آن ***** رمز رنگ است. با انتخاب گزینه "برای وب" یا در وب سایت https://colorscheme.ru/color-names می توانید رنگ های HTML را در هر ویرایشگر گرافیکی پیدا کنید.

شما فقط باید یک رنگ را در پالت دایره انتخاب کنید و شدت آن را در مربع تعیین کنید. در سمت راست دو کد برای html خواهید دید. آنها را کپی کرده و در دفترچه یادداشت قرار دهید.

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

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

اکنون با کلیک بر روی آن از محل فایل مطلع شوید کلیک راستماوس را انتخاب کنید، خط "Open with" را انتخاب کنید و روی هر مرورگر نصب شده در رایانه خود کلیک کنید.

آدرس را از رشته جستجومرورگر شما.

اکنون در برچسب خط را وارد کنید:

• style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"

فایل خود را ذخیره کنید

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

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

• Background-repeat: "Value". گزینه‌های مقدار شما می‌تواند این باشد: "repeat-x" - تصویر پس‌زمینه شما را به صورت افقی و عمودی تکرار می‌کند. "repeat-y" - فقط به صورت عمودی تکرار کنید. "بدون تکرار" - تصویر در جای خود ثابت است و تکرار نمی شود. "فضا" - کل صفحه پر می شود حداکثر تعدادکپی از تصویر، لبه ها قطع خواهد شد. "دور" - همان گزینه، اما لبه های تصویر به طور دقیق مقیاس بندی می شوند.
• پس زمینه-پیوست: "ارزش". اگر به جای کلمه Value، برچسب "scroll" را جایگزین کنید، تصویر همراه با سایت حرکت می کند. "ثابت" - هنگام پیمایش، پس زمینه بدون تغییر باقی می ماند.
• اندازه پس زمینه: Value Value2. در اینجا، مقادیر باید مقداری بر حسب پیکسل داشته باشند. به عنوان مثال: 100px 200px. علاوه بر پیکسل ها، مقادیر درصد نیز پذیرفته می شود. این گزینه ای برای پر کردن صفحه با یک تصویر است. علاوه بر اعداد، می توانید دو پارامتر وارد کنید: "contain" - صفحه را با یک تصویر در امتداد طول و "جلد" پر می کند - صفحه را با یک تصویر در امتداد عرض پر می کند.

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

12/27/14 55.8K

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

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

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

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

روش های مختلفی برای تغییر پس زمینه یک وب سایت وجود دارد. برای این کار از امکانات 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 استفاده کنید. مقادیری که می پذیرد عبارتند از:

• طومار؛


• درست شد.

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

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

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

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

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

ساخت پس زمینه

قبل از اینکه پس‌زمینه سایت html را بسازید، باید آن را باز کنید ویرایشگر متن کد htmlصفحات به یاد داشته باشید که تگ های صفحه به صورت عمودی قرار می گیرند. سپس، بین برچسب ها … ، باید یک تگ قرار دهید- این برچسب ها برای روشن شدن سبک عناصر این صفحه وب مورد نیاز است. در مکان سهنقطه ها باید نوشته شوند - بدن (پس زمینه:) . این تنظیماتی است که به شما امکان می دهد تنظیم کنید سبک های متفاوتبرای پس زمینه صفحه شما می توانید عملیات تنظیم رنگ را به دو صورت انجام دهید. اولین:

بدنه (پس‌زمینه:#000000) - پس‌زمینه صفحه باید سیاه باشد.

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

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

اکنون تصویری که انتخاب کرده اید پس زمینه کل صفحه سایت خواهد بود. امیدواریم نحوه ساخت پس زمینه در html را درک کرده باشید. فقط آن را امتحان کنید و مطمئناً موفق خواهید شد!

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

آیا هنگام تنظیم پس زمینه می توان با html کنار آمد؟

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

بر این اساس، از شیوه نامه های آبشاری (css) استفاده خواهیم کرد. خیلی هست امکانات بیشتربرای تنظیم پس زمینه امروز ما اساسی ترین آنها را تجزیه و تحلیل خواهیم کرد.

چگونه پس زمینه را با css تنظیم کنیم؟

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

پس از تصمیم گیری در مورد انتخابگر، باید نام خود ملک را بنویسید. برای تنظیم رنگ پس زمینه (یعنی یک رنگ ثابت، نه یک گرادیان و نه یک تصویر)، از ویژگی background-color استفاده می شود. بعد از آن، باید یک دو نقطه بگذارید و خود رنگ را بنویسید. این را می توان به روش های مختلف انجام داد. به عنوان مثال، استفاده از کلمات کلیدی، کد هگز، فرمت های rgb، rgba، hsl. هر روشی انجام خواهد داد.

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

بدنه (رنگ پس زمینه: #D4E6B3؛ )

این کد باید در قسمت head درج شود. مهم است که فایل ها در یک پوشه باشند.

تصویر به عنوان پس زمینه

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

بیایید یک بلوک خالی با یک شناسه ایجاد کنیم:

< div id = "bg" > < / div >

بیایید به آن ابعاد واضح و پس زمینه بدهیم:

#bg(عرض: 400 پیکسل؛ ارتفاع: 250 پیکسل؛ تصویر پس‌زمینه: url (html.png)؛ )

#bg( عرض: 400 پیکسل ارتفاع: 250 پیکسل background-image : url (html . png ) ;

از این کد می بینید که من از یک ویژگی جدید به نام background-image استفاده کرده ام. این فقط برای درج یک تصویر به عنوان پس زمینه به یک عنصر html در نظر گرفته شده است. ببینیم چی شد:

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

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

اما آیا به یک ویژگی توجه کردید؟ مرورگر تصویر را در سراسر بلوک گرفت و ضرب کرد. بنابراین، فقط برای اینکه بدانید، این رفتار پیش‌فرض تصاویر پس‌زمینه است - تا زمانی که بتوانند در بلوک قرار بگیرند، به صورت عمودی و افقی تکرار می‌شوند. با این رفتار شما به راحتی می توانید مدیریت کنید. برای این کار از خاصیت Background-repeat استفاده کنید که دارای 4 مقدار اصلی است:

تکرار - مقدار پیش فرض، تصویر در هر دو طرف تکرار می شود.

Repeat-x - فقط در محور x تکرار می شود.

Repeat-y - فقط در امتداد محور y تکرار می شود.

بدون تکرار - به هیچ وجه تکرار نمی شود.

می توانید هر مقدار را بنویسید و ببینید چه اتفاقی می افتد. اینگونه خواهم نوشت:

background-repeat: repeat-x;

پس زمینه - تکرار: تکرار - x;

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

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

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

موقعیت پس زمینه

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

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

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

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

یعنی همه چیز به صورت عمودی یکسان باقی ماند: تصویر پس زمینه در بالا قرار دارد، اما به صورت افقی ما سمت راست را تغییر دادیم، یعنی سمت راست. روش دیگر برای تعیین موقعیت به صورت درصدی است. در این حالت، شمارش معکوس در هر صورت از گوشه بالا سمت چپ شروع می شود. 100٪ - کل بلوک. بنابراین، برای قرار دادن تصویر دقیقاً در مرکز، آن را به صورت زیر می نویسیم:

پس زمینه موقعیت: 50% 50%;

پس زمینه موقعیت: 50% 50%;

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

و در نهایت می توانید موقعیت را بر حسب پیکسل مشخص کنید. همه چیز یکسان است، فقط به جای % px وجود خواهد داشت. در برخی موارد، چنین موقعیتی نیز ممکن است ضروری باشد.

علامت اختصاری

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

پس زمینه: #333 url(bg.jpg) بدون تکرار 50% 50%;

زمینه : #333 url(bg.jpg) بدون تکرار 50% 50%؛

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

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

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

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

بنابراین، تصویر من اکنون تمام فضای بلوک را اشغال می کند، اما اندازه پس زمینه را به آن می دهم:

اندازه پس زمینه: 80% 50%;

اندازه پس زمینه: 80% 50%;

باز هم، پارامتر اول اندازه افقی است، دومی اندازه عمودی است. می بینیم که همه چیز به درستی اعمال شده است - عکس 80٪ عرض بلوک در عرض و نیمی از ارتفاع شده است. در اینجا فقط باید یک توضیح بدهید - با تنظیم اندازه به عنوان درصد، می توانید بر نسبت های تصویر تأثیر بگذارید. پس مراقب باشید اگر می‌خواهید نسبت‌ها را به هم نزنید.

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

جلد - تصویر به گونه ای کوچک می شود که حداقل یک طرف آن بلوک را کاملاً پر کند.

شامل - مقیاس می شود تا تصویر در حداکثر اندازه خود کاملاً در بلوک قرار گیرد.

مزیت این مقادیر این است که نسبت های تصویر را تغییر نمی دهند و آنها را یکسان می کنند.

همچنین، باید بدانید که کشش تصویر می تواند منجر به بدتر شدن کیفیت آن شود. من می توانم از زندگی و عملکرد واقعی طراحان چیدمان مثال بزنم. همه می دانند و می دانند که هنگام طراحی برای دسکتاپ، باید سایت را با عرض مانیتور اصلی تطبیق دهید: 1280، 1366، 1920. اگر یک تصویر پس زمینه با اندازه مثلاً 1280 در 200 بگیرید، و اندازه پس زمینه را برای آن تنظیم نکنید. سپس صفحه نمایش هایی با عرض بزرگتر از آنچه ظاهر می شود جای خالی، تصویر تمام عرض را پر نمی کند.

در 99٪ موارد، این برای توسعه دهنده وب مناسب نیست، بنابراین او اندازه پس زمینه: پوشش را طوری تنظیم می کند که تصویر همیشه تا حداکثر عرض پنجره کشیده شود. این استقبال خوببرای استفاده، اما اکنون با این مشکل مواجه خواهید شد که کاربران با عرض صفحه نمایش 1920 پیکسل ممکن است کیفیت تصویر زیر بهینه را ببینند.

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

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

پس زمینه شفاف با css

یکی دیگر از ویژگی هایی که می توان با آن پیاده سازی کرد css- پس زمینه شفاف یعنی از طریق این پس زمینه می توان دید که پشت آن چه چیزی نهفته است.

به عنوان مثال، پس‌زمینه کل صفحه را با تصویری که قبلاً در مثال‌ها استفاده کردیم، تنظیم می‌کنم. برای بلوک با شناسه bg، که همه آزمایش‌های خود را روی آن انجام می‌دهیم، پس‌زمینه را با استفاده از فرمت تنظیم رنگ rgba تنظیم می‌کنیم.

همانطور که قبلاً گفتم، فرمت های زیادی در css برای تنظیم رنگ ها وجود دارد. یکی از آنها rgb است، یک فرمت نسبتاً شناخته شده برای کسانی که در آن کار می کنند ویرایشگرهای گرافیکی. به این صورت نوشته شده است: rgb(17, 255, 34);

اولین مقدار در پرانتز اشباع رنگ قرمز، سپس سبز و سپس آبی است. مقدار می تواند عددی از 0 تا 255 باشد. فرمت RGBتفاوتی ندارد، فقط یک پارامتر دیگر اضافه می شود - کانال آلفا. مقدار می تواند از 0 تا 1 باشد، جایی که 0 شفافیت کامل است.

در این پست طبق معمول به شما خواهم گفت پس زمینه سایت را تنظیم کنیداستفاده كردن HTMLکد

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

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

به عنوان مثال، شما یک تصویر را در یک وب سایت می بینید، زمانی که در کد HTML صفحه ممکن است به این صورت باشد:

یک رنگ ثابت را برای پس زمینه صفحه تنظیم می کند.

به منظور نصب پس زمینه تک رنگ، نیاز به برچسب زدن دارد اضافه کردن ویژگی bgcolor.

< html >
< head >
< title >عنوان صفحه.

< body bgcolor = "#ffcc00" >

تو می توانی کد داده شدهدرج کنید فایل متنیو با پسوند html ذخیره کنید. سپس با هر مرورگری باز کنید و نتیجه را ببینید.

همانطور که ممکن است حدس بزنید، رنگ پس زمینه از کد رنگ موجود در ویژگی می آید bgcolor="value"که با کلیک بر روی این لینک قابل مشاهده است.

تنظیم یک تصویر در پس زمینه یک صفحه HTML.

به منظور. واسه اینکه. برای اینکه تنظیم تصویر پس زمینه، می توانید از ویژگی استفاده کنید زمینهدر برچسب .

< html >
< head >
< title >عنوان صفحه.

< body background = "http://сайт/images/mlmsecret.jpg" >سلام. این اولین صفحه من است.

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

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

برای اطلاع از مسیر قبلی، باید در صفحه دارای عکس، روی عکس کلیک راست کرده و روی "Copy image URL" کلیک کنید. به این ترتیب نام تصویر/پس زمینه را خواهید دید. سپس می توانید به سادگی با استفاده از همان نام فایل، تصویر قدیمی را با تصویر خود جایگزین کنید.

اینها اصول اولیه راه اندازی بودند. پس زمینه در html، در حال حاضر جالب ترین. 🙂