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

اچ تی ام ال

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

چگونه انجام می شود؟

  1. دریابید که محتوای شما چقدر گسترده است. مثال: 750px.
  2. در برنامه تصویرسازی خود تصویری بسازید (من از Illustrator استفاده می کنم) گسترده تر از محدوده محتوا. مثال: 800 پیکسل
  3. پس زمینه تصویر را به پس زمینه ای که می خواهید در هر طرف وبلاگ داشته باشید ، تنظیم کنید.
  4. یک منطقه سفید را روی پس زمینه اضافه کنید.
  5. روی ناحیه سفید سایه بزنید که از دو طرف منطقه خارج می شود.
  6. قسمت برش را به عرض 1 پیکسل تنظیم کنید. با این کار بارگیری تصویر برای رندر سریع زیبا و جمع و جور می شود.
  7. خروجی تصویر.

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

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

در اینجا نحوه استفاده از تصویر با استفاده از برچسب سبک بدن در خود آورده شده است CSS فایل.

پس زمینه: # B2B2B2 url ('images / bg.gif') تکرار مرکز

در اینجا تشریح برچسب سبک پس زمینه وجود دارد:

  • # B2B2B2 - رنگ پس زمینه کلی صفحه را تنظیم می کند. در این مثال ، خاکستری است که با رنگ خاکستری روی تصویر پس زمینه مطابقت داشته باشد.
  • url ('images / bg.gif') - تصویر پس زمینه ای را که می خواهید استفاده کنید تنظیم می کند.
  • repeat-y - تصویر را برای تکرار در محور y تنظیم می کند. بنابراین تصویر پس زمینه از بالا به پایین صفحه تکرار می شود.
  • center - تصویر را در مرکز صفحه تنظیم می کند.

زیبا و آسان ... یک تصویر ، یک برچسب سبک!

2 نظرات

  1. 1
  2. 2

شما چه فکر میکنید؟

این سایت از Akismet برای کاهش هرزنامه استفاده می کند. بدانید که چگونه نظر شما پردازش می شود.