علاقه خود را به وب سایت خود را با گرافیک پس زمینه علاقه مند شوید
تصاویر بخش مهمی از طراحی وب سایت جذاب هستند. این شامل استفاده از تصاویر پسزمینه است. این تصاویر و گرافیک هایی هستند که در قسمت های مختلف یک صفحه استفاده می شوند، در مقایسه با تصاویری که به عنوان بخشی از صفحات محتوا ارائه می شوند. این تصاویر پس زمینه می تواند علاقه بصری به یک صفحه را اضافه کند و به شما کمک کند تا طراحی بصری را که ممکن است در یک صفحه جستجو کنید، به دست آورید.
اگر شروع به کار با تصاویر پس زمینه کنید، بدون شک به صحنه ای می روید که در آن می خواهید یک تصویر برای کشیدن به صفحه مناسب باشد.
این به ویژه برای وب سایت های پاسخگو که به طیف وسیعی از دستگاه ها و اندازه صفحه نمایش تحویل داده می شوند .
این تمایل به کشیدن یک تصویر پسزمینه یک تمایل بسیار رایج برای طراحان وب است زیرا هر تصویر در فضای وب سایت متناسب نیست. به جای تنظیم اندازه ثابت، کشش تصویر اجازه می دهد تا آن را به انعطاف پذیر برای متناسب با صفحه مهم نیست که چقدر گسترده و یا باریک پنجره مرورگر است.
بهترین روش برای کشیدن یک تصویر به پس زمینه یک صفحه، استفاده از خصوصیت CSS3 برای اندازه پسزمینه است. در اینجا یک مثال است که از یک تصویر پسزمینه برای یک صفحه استفاده می کند و اندازه آن را به 100٪ تنظیم می کند تا همیشه آن را در متن صفحه قرار دهد.
بدن {
پس زمینه: url (bgimage.jpg) بدون تکرار؛
پسزمینه: 100٪؛
}
طبق گفته caniuse.com، این ویژگی در IE 9+، فایرفاکس 4+، اپرا 10.5+، سافاری 5+، کروم 10.5+ و در همه مرورگرهای بزرگ تلفن همراه کار می کند. این شما را برای تمام مرورگرهای مدرن موجود در دسترس شما قرار می دهد که بدین معنی است که شما باید از این ویژگی بدون ترس استفاده کنید که بر روی صفحه شخصی کار نخواهد کرد.
کشیدن سابقه کشش در مرورگرهای قدیمیتر
بسیار بعید است که شما نیاز به پشتیبانی از هر مرورگر قدیمی تر از IE9 داشته باشید، اما فرض کنید شما نگران این هستید که IE8 این ویژگی را پشتیبانی نمی کند. در این مثال، شما می توانید پس زمینه کشش را جعل کنید. و شما می توانید پیشوند مرورگر برای فایرفاکس 3.6 (-moz-background-size) و اپرا 10.0 (-o-background-size) استفاده کنید.
ساده ترین راه برای جعل تصویر پس زمینه کشش این است که آن را در سراسر صفحه گسترش دهید. سپس فضای اضافی را به پایان نرسانید و یا نگران نباشید که متن شما در منطقه کشیده شده باشد. در اینجا چگونگی انجام این کار:
id = "bg" />
- ابتدا اطمینان حاصل کنید که تمام مرورگرها دارای ارتفاع 100٪، حاشیه 0 و افزونه 0 در عناصر HTML و BODY هستند. در سر سند HTML خود زیر را قرار دهید:
- تصویری را که می خواهید پس زمینه را به عنوان اولین عنصر صفحه وب اضافه کنید اضافه کنید و آن را به نام "bg" بدهید:
- تصویر پس زمینه را به طوری که آن را در بالا و چپ ثابت و 100٪ گسترده و 100٪ در ارتفاع است. این را به جدول سبک خود اضافه کنید:
img # bg {
موقعیت: ثابت؛
بالا: 0؛
سمت چپ: 0؛
عرض: 100٪؛
ارتفاع: 100٪؛
} - تمام مطالب خود را به صفحه داخل عنصر DIV با شناسه «محتوا» اضافه کنید. DIV زیر تصویر زیر را اضافه کنید:
توجه: جالب است که در حال حاضر به صفحه شما نگاه کنید. تصویر باید نمایش داده شود، اما محتوای شما به طور کامل از دست رفته است. چرا؟ از آنجا که تصویر پس زمینه در ارتفاع 100٪ است و بخش محتوا پس از تصویر در جریان سند است - اکثر مرورگرها آن را نمایش نمی دهند.تمام محتوای شما در اینجا - از جمله هدر ها، پاراگراف ها و غیره
- محتویات خود را به گونه ای تنظیم کنید که نسبی باشد و دارای z-index از 1 باشد. این امر در بالای تصویر پسزمینه در مرورگرهای سازگار با استاندارد قرار می گیرد. این را به جدول سبک خود اضافه کنید:
#محتوا {
موقعیت: نسبی؛
z-index: 1؛
}
- اما شما انجام نمی شود اینترنت اکسپلورر 6 استانداردهای سازگار نیست و هنوز هم مشکلی دارد. راه های بسیاری برای مخفی کردن CSS از هر مرورگر وجود دارد اما IE6 وجود دارد، اما ساده ترین (و کمترین احتمال ایجاد مشکلات دیگر) این است که از نظر شرطی استفاده کنید. بعد از اینکه شیوه نامه خود را در سر سند خود قرار دهید، زیر را وارد کنید:
- در داخل نظر برجسته شده، یک صفحه سبک دیگر با برخی از سبک ها اضافه کنید تا IE 6 را به خوبی بازی کنید:
- مطمئن شوید که در IE 7 و IE 8 نیز آزمایش شود. ممکن است لازم باشد نظرات را برای آنها نیز تنظیم کنید. با این حال، وقتی آن را آزمایش کردم، کار می کرد.
خوب - این درست است WAY overkill. سایت های بسیار کمی نیاز به پشتیبانی از IE 7 یا 8 دیگر، بسیار کمتر IE6!
به این ترتیب، این رویکرد قدیم و غیرممکن است. من آن را اینجا بیشتر به عنوان یک مدل از کنجکاوی را به عنوان چقدر چیزهای سخت تر قبل از همه مرورگرهای خود را بازی کرده اند به طرز خوبی با هم!
فهم تصویر سابقه کشش در یک فضای کوچکتر
شما می توانید یک تکنیک مشابه را برای جعل تصویر پس زمینه کشش در یک DIV یا یک عنصر دیگر در صفحه وب خود استفاده کنید. این کمی پیچیده تر است زیرا شما باید از موقعیت مطلق استفاده کنید یا مسائل مربوط به فاصله ای عجیب و غریب برای بخش های دیگر صفحه خود داشته باشید.
- تصویر را روی صفحه قرار دهید که می خواهم به عنوان پس زمینه استفاده کنم.
- در صفحه سبک، عرض و ارتفاع تصویر را تنظیم کنید. توجه داشته باشید، شما می توانید درصد را برای عرض یا ارتفاع استفاده کنید، اما برای مقادیر قد برای ارتفاع تنظیم می کنم.
img # bg {
عرض: 20 متر؛
ارتفاع: 30 متر؛
} - محتوا را در div با شناسه "محتوا" همانطور که در بالا انجام دادید، قرار دهید:
تمام مطالب خود را اینجا قرار دهید
- محتویات div را به اندازه تصویر پس زمینه همان عرض و ارتفاع را سبک کنید:
div # content {
عرض: 20 متر؛
ارتفاع: 30 متر؛
} - سپس محتوا را تا ارتفاع همان تصویر قرار دهید. بنابراين اگر تصوير شما 30 ثانيه باشد، شما مي توانيد سبک بالايي داشته باشيد: -30EM؛ فراموش نکنید که z-index 1 را در محتوا قرار دهید.
#محتوا {
موقعیت: نسبی؛
top: -30em؛
z-index: 1؛
عرض: 20 متر؛
ارتفاع: 30 متر؛
} - سپس به عنوان یک z-index از 1 برای IE 6 اضافه کنید، همانطور که در بالا بودید:
باز هم، با استفاده از پس زمینه با استفاده از پشتیبانی گسترده مرورگر آن را در حال حاضر، این روش نیز به احتمال زیاد غیر ضروری است و به عنوان یک محصول از دوران گذشته ارائه شده است. اگر می خواستید از این روش استفاده کنید، فقط مطمئن شوید که این را در مرورگرهای زیادی می توانید انجام دهید.
و اگر محتویات محتوا تغییر اندازه شما، شما باید اندازه کانتینر و تصویر پسزمینه خود را تغییر دهید، در غیر این صورت، شما با نتایج عجیب و غریب روبرو خواهید شد.