شفافیت پس زمینه CSS. پس زمینه شفاف یا متن با CSS

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

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

ویژگی رنگ پس زمینه

در CSS، رنگ پس زمینه با استفاده از یک کد هگز، نام رنگ یا RGB ورود: می توان در راه های مختلفی تنظیم شده است. در CSS3 امکان پذیر شد به استفاده از به جای گزینه RGB-ضبط با RGBA.

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

بدن {رنگ پس زمینه: # cf0 ؛}.

نام حتی در رنگ های عجیب و غریب ترین. برای مثال، در علاوه بر استاندارد های قرمز و سفید شما می توانید NavajoWhite (#FFDEAD) و یا Honeydew2 (# E0EEE0) استفاده کنید:

بدن {رنگ پس زمینه: بنفش، }.

گزینه دوم RGB است و یا ورود RGBA اجازه می دهد تا به شما برای مشخص نه تنها رنگ بلکه شفافیت پس زمینه CSS، اما این روش تنها در نسخه های اینترنت اکسپلورر مسن تر از 9 کار می کند. مرورگرهای دیگر تشخیص نسخه طبیعی با شفافیت. با توجه به استانداردهای W3C بهتر برای استفاده است هنوز هم RGBA به جای RGB معمول تر است.

آخرین مقدار در پس زمینه RGBA و مجموعه کدورت از 0 (شفاف) تا 1 (مات).

برخی از ارزش های غیر معمول وجود دارد. رنگ پس زمینه می توان با استفاده از HSL و HSLA تنظیم شده است. هر دو به CSS3 اضافه شد، و بنابراین توسط اینترنت اکسپلورر نسخه 9 یا بالاتر پشتیبانی نمی شود. وی RGB یکسان یا RGBA، تنها در فرمت های مختلف: رنگ (سایه - ارزش در چرخه رنگ در، در درجه داده شده)، اشباع (اشباع - شدت رنگ به عنوان یک درصد، از 0 تا 100)، سبکی (سبکی - روشنایی، اندازه گیری به طور مشابه پارامتر اشباع ).

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

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

{تصویر پس زمینه بدن: آدرس (bg1.png)، آدرس (bg2.png)}.

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

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

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

بدن {موقعیت پس زمینه: مرکز سمت راست ؛} - در این مثال، الگوی خواهد شد در سمت راست صفحه، بالا و پایین از فاصله تصویر را به همان واقع شده است.

ویژگی پس زمینه اندازه

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

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

ویژگی background-attachment را

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

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

به عنوان مثال استفاده:

بدن {background-attachment را ثابت}.

در حال حاضر، فایرفاکس اموال گذشته (محلی) پشتیبانی نمی کند.

ویژگی background-origin در

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

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

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

ویژگی تکرار پس زمینه

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

• بدون تکرار - تصویر در یک صفحه در یک نسخه واحد به نظر می رسد.
• تکرار - پس زمینه در x و y تکرار شده است؛
• تکرار x - فقط به صورت افقی.
• تکرار y - تنها به صورت عمودی.
• فضا - پس زمینه تکرار شده است، اما اگر فضا غیر ممکن است برای پر کردن در بین تصاویر به نظر می رسد خالی.
• دور - تصویر کوچک است، اگر آن تمام منطقه را از طیف تصاویر را پر کنید.

به عنوان مثال از ویژگی های:

بدن {تکرار پس زمینه: NO- تکرار تکرار} - مشابه تکرار پس زمینه: تکرار y.

در CSS3 ممکن است مقادیر را برای چندین تصویر هنگامی که فهرست پارامترها، با کاما جدا شده را مشخص کنید.

خاصیت background-کلیپ

این ویژگی رفتار پس زمینه تحت مرزهای (به عنوان مثال، در مورد از فریم نقطه چین) تعریف می کند:

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

به عنوان مثال استفاده:

بدن {پس زمینه کلیپ: محتوا جعبه؛}.

کروم و سافاری نیاز پیشوند از -webkit-.

ویژگی Opacity و فیلتر

ویژگی کدورت اجازه می دهد تا شما را به مجموعه شفافیت پس زمینه - اموال CSS در تمام مرورگرها کار می کنند. این مقدار در محدوده 0.0 تا 1.0 فراگیر تنظیم شده است. در این مورد، شما می توانید شفافیت پس زمینه CSS مجموعه هیچ مقدار صحیح به جای 0.3 به اندازه کافی برای ارسال 0.3 است:

.block {تصویر پس زمینه: آدرس ( img.png)؛ کدورت: 0.3؛}.

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

.block {تصویر پس زمینه: آدرس ( img.png)؛ فیلتر: آلفا (کدورت = 30)}.

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

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