با ظهور CSS3، کار طراحان طرح‌بندی از بسیاری جهات ساده‌تر و منطقی‌تر شده است: از این گذشته، اکنون می‌توانید واقعاً هر شیء را به‌طور انعطاف‌پذیر پیکربندی کنید و کمتر و کمتر به جاوا اسکریپت متوسل شوید. فرض کنید باید شفافیت پس زمینه را تنظیم کنید - CSS بلافاصله چندین گزینه را ارائه می دهد.
پس‌زمینه با مجموعه‌ای از ویژگی‌ها مشخص می‌شود، پس‌زمینه-تکرار، پس‌زمینه-ضمیمه، پس‌زمینه-منبع، پس‌زمینه-کلیپ، پس‌زمینه-رنگ)، و هر یک از آنها را می‌توان به طور جداگانه مشخص کرد یا تحت ویژگی پس‌زمینه ترکیب کرد. بیایید به هر یک از آنها با جزئیات بیشتری نگاه کنیم.
ویژگی پس زمینه رنگ
حتی IE8 نیز از این روش پشتیبانی می کند. چندین تصویر به عنوان پس زمینه برای طرح بندی انعطاف پذیر استفاده می شود. نکته اصلی این است که هنگام استفاده از هر تصویر، فراموش نکنید که آن را نیز مشخص کنید رنگ CSSپس زمینه، زیرا کاربران ممکن است به سادگی تصویر را بارگذاری نکنند.
ویژگی پس زمینه موقعیت
اگر از یک تصویر برای تنظیم پس‌زمینه یک بلوک استفاده می‌کنید، CSS به شما این امکان را می‌دهد که تصویر را در هر نقطه از صفحه قرار دهید. به طور پیش فرض، تصویر در سمت چپ قرار دارد گوشه بالا. این ویژگی یا نشانه های شفاهی (بالا، پایین، چپ، راست) یا عددی (درصد، پیکسل و سایر واحدهای اندازه گیری) را می پذیرد. در این مورد، شما باید دو مقدار را مشخص کنید: افقی و عمودی:
بدن (موقعیت پس زمینه: سمت راست مرکز؛) - در این مثال، پس زمینه در سمت راست صفحه قرار می گیرد و فواصل پایین و بالا تا تصویر یکسان است.
ویژگی پس زمینه اندازه
گاهی اوقات با با استفاده از CSSپس زمینه را کشیده یا اندازه آن را کاهش دهید. برای انجام این کار، از ویژگی background-size استفاده کنید، و اندازه پس‌زمینه را می‌توان به پیکسل یا درصد یا هر واحد اندازه‌گیری دیگری تنظیم کرد.
برخی از مشکلات با این ویژگی وجود دارد: for نمایش صحیحپس زمینه در نسخه های قبلی مرورگرها استفاده از پیشوندها ضروری است. قطعا، نسخه های فعلیبه طور کامل از این ویژگی پشتیبانی می کند و نیاز به ویژگی های خاص ناپدید شده است.
ویژگی پس زمینه پیوست
این ویژگی رفتار تصویر پس زمینه را هنگام پیمایش مشخص می کند. بنابراین، می تواند 3 مقدار داشته باشد (بدون در نظر گرفتن وراثت، که در همه ویژگی های ارائه شده در این مقاله مشترک است):
- درست شد- تصویر را در پس زمینه بی حرکت می کند.
- طومار- اسکرول پس زمینه همراه با عناصر دیگر؛
- محلی- اگر محتوا دارای پیمایش باشد، تصویر پس‌زمینه پیمایش می‌شود. پس‌زمینه‌ای که فراتر از محتوا است، ثابت است.
مثال استفاده:
بدنه (پیوست پس زمینه ثابت شد).
فایرفاکس در حال حاضر آخرین ویژگی (محلی) را پشتیبانی نمی کند.
ویژگی پس زمینه منشاء
این ویژگی مسئول موقعیت یابی عنصر است. مرورگرها نسخه های قبلینیاز به استفاده از پیشوندها خود ویژگی دارای سه پارامتر است:
- padding-boxبا در نظر گرفتن ضخامت قاب، پس زمینه را نسبت به لبه قرار می دهد.
- جعبه مرزیبا ویژگی قبلی تفاوت دارد زیرا خط مرزی می تواند به طور کامل یا جزئی با پس زمینه همپوشانی داشته باشد.
- جعبه محتواتصویر را در موقعیت قرار می دهد و آن را به محتوا پیوند می دهد.
اگر چندین مقدار مشخص شده باشد، مرورگرها ممکن است واکنش متفاوتی نشان دهند: فایرفاکس و اپرا فقط گزینه اول را می پذیرند.
ویژگی پس زمینه تکرار
به عنوان یک قاعده، اگر پس زمینه توسط یک تصویر داده شود، باید به صورت افقی یا عمودی تکرار شود. این همان چیزی است که ویژگی پس زمینه تکرار برای آن استفاده می شود. بنابراین، پس‌زمینه بلوکی که CSS آن حاوی چنین ویژگی است، می‌تواند یکی از چندین پارامتر را داشته باشد:
- بدون تکرار- تصویر در یک نسخه در صفحه ظاهر می شود.
- تکرار- پس زمینه در امتداد محورهای x و y تکرار می شود.
- تکرار-x- فقط به صورت افقی؛
- تکرار y- فقط به صورت عمودی؛
- فضا- پس‌زمینه تکرار می‌شود، اما اگر فضا پر نشود، فضای خالی بین تصاویر ظاهر می‌شود.
- گرد- در صورتی که امکان پر کردن کل منطقه با تصاویر کامل وجود نداشته باشد، تصویر مقیاس بندی می شود.
نمونه ای از استفاده از ویژگی:
بدنه (تکرار پس‌زمینه: تکرار بدون تکرار)- مشابه background-repeat: repeat-y.
در CSS3، اگر پارامترهایی را که با کاما از هم جدا شده اند فهرست کنید، می توانید مقادیر را برای چندین تصویر تنظیم کنید.
ویژگی پس زمینه کلیپ
این ویژگی رفتار پس‌زمینه را در زیر حاشیه‌ها تعریف می‌کند (به عنوان مثال، در مورد مرزهای نقطه‌دار):
- padding-box- پس زمینه به شدت در داخل بلوک نمایش داده می شود.
- جعبه مرزی- تصویر متناسب با قاب.
- جعبه محتوا- عکس در پس زمینه فقط در داخل محتوا ظاهر می شود.
مثال استفاده:
بدنه (پس زمینه-کلیپ: محتوا-جعبه؛).
Chrom و Safari به پیشوند -webkit- نیاز دارند.
کدورت و صفات فیلتر
ویژگی opacity به شما امکان می دهد شفافیت پس زمینه را تنظیم کنید - ویژگی CSS در همه مرورگرها کار می کند. مقدار را می توان از 0.0 تا 1.0 شامل تنظیم کرد. با این کار می توانید شفافیت را تنظیم کنید پس زمینه CSSبدون مقدار صحیح: به جای 0.3 کافی است بنویسید.3:
.block (تصویر پس زمینه: url(img.png)؛ کدورت: 0.3;).
برای تنظیم شفافیت پس‌زمینه، که CSS آن حتی برای IE زیر نسخه 9 کار می‌کند، از ویژگی فیلتر استفاده کنید:
.block (تصویر پس‌زمینه: url(img.png)؛ فیلتر: آلفا (تصویر = 30)؛).
در این مورد، مقدار opacity بین 0 تا 100 تنظیم می شود. توجه داشته باشید که ویژگی opacity با تنظیمات شفافیت متفاوت است. با استفاده از RGBAوراثت: هنگام استفاده شفافیت شفافنه تنها پس زمینه، بلکه تمام عناصر داخل بلوک.
همیشه آمار استفاده از مرورگر را برای کشورهای مستقل مشترک المنافع و سایر کشورها نظارت کنید. بیشترین یک مشکل بزرگهمه طراحان طرح‌بندی دارای نسخه‌های قدیمی IE هستند که اجازه استفاده کامل از CSS3 را نمی‌دهند. هنگام کدنویسی، استفاده از آن را فراموش نکنید خدمات ویژه، که بررسی می کند آیا مرورگر شما از هر کدام پشتیبانی می کند یا خیر ویژگی CSS. اگر نمی توانید نسخه های قدیمی مرورگرها را نصب کنید، سرویسی را پیدا کنید که عملکرد سایت را در آن بررسی کند مرورگرهای مختلفبرخط.
تصویری که به عنوان استفاده خواهد شد را مشخص می کند تصویر پس زمینهسلول های جدول برخلاف تصاویر معمولی، پس‌زمینه فاقد عرض یا ارتفاع تنظیم شده است و همیشه در اندازه کامل و ۱۰۰ درصد نمایش داده می‌شود. اگر اندازه تصویر کوچکتر از عرض یا ارتفاع سلول باشد، آنگاه تصویر به صورت افقی به سمت راست و پایین تکرار می شود و مانند موزاییک در یک ردیف قرار می گیرد. به همین دلیل، در تقاطع تصاویر پس زمینهممکن است تفاوت های قابل مشاهده ای رخ دهد که برای بازدیدکنندگان سایت قابل توجه باشد. هنگام انتخاب یک تصویر پس زمینه، مطمئن شوید که کنتراست کافی بین آن و محتویات سلول وجود دارد. همچنین امکان استفاده از تصاویر متحرک به عنوان پس زمینه نیز وجود دارد. فرمت GIF، اما توجه خوانندگان را منحرف می کنند.
نحو
ارزش های
هر آدرس تصویر معتبر - می توانید از یک مسیر نسبی یا مطلق استفاده کنید.
مقدار پیش فرض
مثال
| سلول با الگوی پس زمینه |
توجه داشته باشید
برای تنظیم تصویر پس زمینهبرای یک سلول، با افزودن آن به انتخابگر td یا th، از ویژگی پس زمینه استایل استفاده کنید.
| ... |
مرورگرها
نمادهای زیر در جدول مرورگر استفاده می شود.
- - این عنصر به طور کامل توسط مرورگر پشتیبانی می شود.
- - عنصر توسط مرورگر درک نمی شود و نادیده گرفته می شود.
- - ممکن است در حین کار ظاهر شود خطاهای مختلف، یا مورد با رزرو پشتیبانی می شود.
عدد نشان دهنده نسخه مرورگری است که عنصر از آن پشتیبانی می شود.
فکر می کنم هیچ سایتی وجود ندارد که از ملک استفاده نشود پس زمینه CSS
. به نظر می رسد که چه چیزی می تواند ساده تر از این ویژگی باشد؟ اما نه، قابلیت های آن بسیار گسترده تر از تخصیص معمول یک تصویر یا رنگ به عنوان پس زمینه صفحه است. برخی چیزها آشنا خواهند بود، در حالی که برخی دیگر احتمالاً برای بسیاری جدید خواهند بود. در هر صورت، دانستن کامل نحوه عملکرد پس زمینه مفید خواهد بود.
CSS3 چیزهای جدیدی مانند شفافیت و اختصاص چندین تصویر به عنوان پس زمینه را به این ویژگی آورده است، اما در زیر در مورد این موضوع صحبت خواهیم کرد، اما ابتدا به اصول اولیه ویژگی خواهیم پرداخت. زمینه.
رنگ پس زمینه
من بیش از یک بار مطمئن هستم که شما قبلا رنگ پس زمینه را بیش از یک بار اختصاص داده اید. این را می توان با استفاده از چندین نوع نماد انجام داد: منظم (از نام رنگ استفاده می شود)، نماد هگزادسیمال یا RGB. هر نوع معادل است، از هر کدام که بیشتر دوست دارید استفاده کنید. سعی می‌کنم از کوتاه‌ترین گزینه استفاده کنم و برای درک راحت‌تر، فایل استایل حاصل کمی کوچکتر است.
P (رنگ پس‌زمینه: قرمز؛) p (رنگ پس‌زمینه: #f00;) p (رنگ پس‌زمینه: #ff0000؛) p (رنگ پس‌زمینه: rgb(255، 0، 0؛))
CSS3 از شفافیت پشتیبانی می‌کند، بنابراین می‌توانیم آن را به رنگ خود اضافه کنیم، به عنوان مثال:
P (رنگ پس زمینه: rgba(255، 0، 0، 0.5)؛)
رقم آخر شفافیت را 50 درصد تعیین می کند. می توانید مقدار شفافیت را از 0 (پس زمینه کاملا شفاف) به 1 (کاملاً مات) تنظیم کنید.
تصویر پس زمینه
این ویژگی همچنین اغلب استفاده می شود؛ به شما امکان می دهد یک تصویر را به پس زمینه اختصاص دهید. CSS3 توانایی اختصاص چندین تصویر به پس زمینه را اضافه کرده است که هر یک لایه خاص خود را ایجاد می کند، بنابراین هر یک از تصاویر بعدی با قبلی همپوشانی دارند. چرا این ممکن است مفید باشد؟ همه چیز کاملاً ساده است - فرض کنید باید زواید کوچکی را در هر گوشه سایت پیچ کنید. کم و بیش ارائه شده است طرح لاستیکیاستفاده از یک تصویر یک گزینه نیست. بنابراین، ما 4 "لایه" می سازیم، هر تصویر را به گوشه خود منتقل می کنیم و این همه، مشکل حل می شود
متن (تصویر پس زمینه: url("image1")، url("image2")، url("image3"))
اگر لازم است یک تصویر را به پس زمینه اختصاص دهید، فقط اولین تصویر را در کد می گذاریم، فکر می کنم این قابل درک است.
هنگام استفاده از هر تصویر به عنوان پس زمینه، باید دو قانون را به خاطر بسپارید:
- تنظیم رنگ متضادپس زمینه در صورتی که کاربر به دلایلی تصویر را نبیند. به سادگی می تواند نمایش تصاویر را خاموش کند و در ترافیک صرفه جویی کند.
- از یک تصویر پس زمینه برای انتقال هیچ تصویری استفاده نکنید اطلاعات مهم. به دلایل ذکر شده در بالا، کاربر ممکن است آن را نبیند.
پشتیبانی از چندین تصویر پس زمینه بسیار گسترده است. همه مرورگرها حتی IE8 از این ویژگی پشتیبانی می کنند.
