css شفاف شفافیت پس زمینه CSS پس زمینه یا متن شفاف با CSS. استفاده از تصویر PNG

سلام به همه. همانطور که می دانید پس زمینه یک ویژگی CSS است که به شما امکان می دهد رنگ پس زمینه یا آپلود یک تصویر را به عنوان پس زمینه تنظیم کنید. CSS3 همچنین قابلیت ایجاد خطی و گرادیان های شعاعی، اما این موضوع برای یک مقاله جداگانه است. در همان یکی، می‌خواستم به شما بگویم که چگونه برای ویژگی پس‌زمینه در css شفافیت تنظیم کنید.

شفافیت را برای پس زمینه css تنظیم کنید

بنابراین، همه اینها به لطف فرمت ضبط رنگی مانند rgba بسیار ساده انجام می شود. اگر با ویرایشگرهای گرافیکی کار می کنید، احتمالاً می دانید که حالت رنگ rgb به صورت زیر رمزگشایی می شود: نسبت قرمز (قرمز)، نسبت سبز (سبز) و آبی (آبی). بنابراین ، rgba تقریباً یکسان است ، فقط یک پارامتر دیگر اضافه شده است - شفافیت. اینگونه نوشته شده است:

رنگ پس‌زمینه: rgba (173، 57، 22، 0.5)

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

اکنون می دانید که چگونه برای ویژگی پس زمینه در css شفافیت تنظیم کنید. برای این کار باید از حالت رنگ rgba استفاده کنید. یک ویژگی opacity نیز وجود دارد، اما برای کل عنصر به عنوان یک کل اعمال می شود. یعنی هنگام اعمال opacity می توان شفافیت را نیز روی متن اعمال کرد که باعث ناخوانایی آن می شود.

مثال پس زمینه شفاف

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

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

تنظیم رنگ به خودی خود با استفاده از rgba دشوار نیست. همانطور که قبلا ذکر شد، سه حرف اول به معنای سه رنگ اصلی: قرمز، سبز و آبی یا بهتر است بگوییم سهم آنها (از 0 تا 255) است. با تنظیم مقادیر مختلف می توانید میلیون ها رنگ مختلف دریافت کنید و شفافیت به شما این امکان را می دهد که در صورت لزوم افکت های زیبای زیادی برای سایت داشته باشید.

ولاد مرژویچ

شفافیت جزئی، زمانی که به درستی استفاده شود، در طراحی وب سایت بسیار چشمگیر به نظر می رسد. نکته اصلی این است که در زیر بلوک های شفاف نباید یک الگوی تک رنگ، بلکه یک تصویر وجود داشته باشد، در این حالت شفافیت قابل توجه می شود. این افکت از راه‌های زیادی به دست می‌آید، و اگر همه چیز را به خاطر می‌آورید، از جمله روش‌های قدیمی، پس استفاده از یک تصویر PNG به عنوان پس‌زمینه، ایجاد یک تصویر شطرنجی و ویژگی opacity است. اما به محض اینکه ایجاد یک پس‌زمینه شفاف در بلوک ضروری می‌شود، این روش‌ها جنبه منفی ناخوشایندی دارند. من یک بررسی کوتاه خواهم کرد تا مشخص شود که چه چیزی در خطر است، و همچنین برای آن دسته از خوانندگانی که با گزینه های غیر سنتی برای ایجاد یک جلوه شفاف آشنا نیستند.

PNG به عنوان پس زمینه

AT ویرایشگر گرافیکییک طرح شفاف تک رنگ از قبل آماده شده است که در قالب PNG-24 ذخیره شده است (شکل 1). یکی از ویژگی های این فرمت پشتیبانی از 256 سطح شفافیت یا به زبان ساده می تواند تصاویر شفاف را نمایش دهد.

برنج. 1. تصویر برای ایجاد پس زمینه

سپس همانطور که در مثال 1 نشان داده شده است، از طریق ویژگی پس زمینه، یک تصویر را به عنوان پس زمینه اضافه می کنیم.

مثال 1: استفاده از یک الگوی نیمه شفاف

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

نتیجه این مثالدر شکل نشان داده شده است. 3.

برنج. 2. اعمال کاغذ دیواری

مرورگر قدیمی اینترنت اکسپلورر 6 با شفافیت در PNG-24 کار نمی کند، اگر به دلایلی نیاز به پشتیبانی از این مرورگر دارید، باید از اسکریپت برای آن استفاده کنید.

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

تصویر شطرنجی

این روش متعلق به روش‌های باستانی اجرای شفافیت است، زمانی که مرورگرها "نمی‌توانستند کاری انجام دهند" و شما باید به دنبال راه‌حل‌های غیرقالب می‌گردید. ترفند این است که تصویری ایجاد کنید که بین پیکسل های شفاف و مات متناوب باشد (شکل 3). چنین ساختار منظمی اثر شفافیت را ایجاد می کند و اساساً از آن تقلید می کند.

برنج. 3. طرح چهارخانه بزرگ شده

در اینجا به نظر می رسد در پایان (شکل 4).

برنج. 4. تقلید شفافیت

معایب این روش با روش قبلی قابل مقایسه است، الگوهای moire نیز می توانند رخ دهند و تخریب متن رخ می دهد.

خاصیت کدورت

ویژگی Opacity CSS 3 مقدار شفافیت را تنظیم می کند و از 0 تا 1 متغیر است، که در آن صفر شفافیت کامل عنصر است و یک، برعکس، Opacity است. ویژگی opacity یک ویژگی دارد - شفافیت به همه عناصر فرزند توزیع می شود و آنها نمی توانند از مقدار شفافیت والد خود تجاوز کنند. معلوم می شود که هیچ متنی مات روی پس زمینه شفاف وجود ندارد (مثال 2).

مثال 2: استفاده از opacity

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

نتیجه مثال در شکل نشان داده شده است. 5.

برنج. 5. شفافیت متن و پس زمینه

در اینترنت اکسپلورر تا نسخه 8.0، کدورت کار نمی کند، بنابراین از ویژگی فیلتر مخصوص مرورگر برای آن استفاده می شود. طبیعتاً باعث ایجاد کد CSS نامعتبر می شود.

RGBA

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

رنگ پس زمینه: rgba(r, g, b, a);

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

همه مرورگرها از این فرمت پشتیبانی نمی کنند: Internet Explorer از نسخه 9، Opera از نسخه 10، Firefox از نسخه 3، Safari از نسخه 3.2. اما به طور کلی، مرورگرهای مدرننمایش شفافیت به درستی برای نسخه‌های قدیمی‌تر IE، می‌توانید به طور جداگانه رنگ را در قالب معمول آن مشخص کنید، در حالی که، البته، هیچ شفافیتی وجود نخواهد داشت. یا دوباره از ویژگی filter استفاده کنید، اما پس از آن باید این واقعیت را تحمل کنید که شفافیت روی متن نیز تأثیر می گذارد (مثال 3). برای اجرای کد CSS معتبر، از نظرات شرطی استفاده کردم.

مثال 3: استفاده از RGBA

HTML5 CSS3 IE Cr Op Sa Fx

نتیجه مثال را می توان در شکل مشاهده کرد. 6.

برنج. 6. پس زمینه نیمه شفاف با متن مات

تصویر را با تصویر قبلی مقایسه کنید، حروف روشن تر و واضح تر شده اند.

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

Div (رنگ پس‌زمینه: قرمز؛ /* در IE7 قابل استفاده نیست */ پس‌زمینه رنگ: rgba(255، 0، 0، 0.5)؛ )

این با جایگزینی ویژگی background-color با پس زمینه حل می شود.

Div ( پس‌زمینه: قرمز؛ /* و این کار می‌کند */ پس‌زمینه: rgba(255, 0, 0, 0.5); ) با این حال، یک اخطار وجود دارد. اگر آن را روی پس‌زمینه تنظیم کنید، اعتبار‌دهنده CSS "قسم می‌خورد". فرمت RGBA. اما در عین حال، به درستی برای رنگ پس‌زمینه اعمال می‌شود. به طور کلی، مثل همیشه، شما باید بین مرورگر و اعتبار یکی را انتخاب کنید.

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

پس‌زمینه با مجموعه‌ای از ویژگی‌ها، پس‌زمینه-تکرار، پس‌زمینه-ضمیمه، پس‌زمینه-منبع، پس‌زمینه-کلیپ، پس‌زمینه-رنگ مشخص می‌شود، و هر یک از آنها را می‌توان به‌طور جداگانه مشخص کرد یا تحت ویژگی پس‌زمینه ترکیب کرد. بیایید هر یک از آنها را با جزئیات بیشتری تجزیه و تحلیل کنیم.

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

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

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

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

بدن (موقعیت پس‌زمینه: مرکز راست؛) - در این مثال، پس‌زمینه در سمت راست صفحه قرار می‌گیرد و فاصله‌های پایین و بالا تا تصویر یکسان است.

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

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

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

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

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

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

مثال استفاده:

بدنه (پیوست پس زمینه ثابت شد).

فایرفاکس در حال حاضر آخرین ویژگی (محلی) را پشتیبانی نمی کند.

ویژگی پس زمینه منشاء

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

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

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

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

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

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

نمونه ای از استفاده از ویژگی:

بدنه (تکرار پس‌زمینه: تکرار بدون تکرار)- به همین ترتیب background-repeat: repeat-y.

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

ویژگی پس زمینه کلیپ

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

• جعبه لایی- پس زمینه به شدت در داخل بلوک نمایش داده می شود.
• جعبه مرزی- تصویر زیر قاب می رود.
• جعبه محتوا- تصویر روی پس‌زمینه فقط در داخل محتوا ظاهر می‌شود.

مثال استفاده:

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

Chrom و Safari به استفاده از پیشوند -webkit- نیاز دارند.

کدورت و صفات فیلتر

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

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

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

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

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

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

شفافیت پس زمینه در سایت از طریق ویژگی های CSS ایجاد می شود. دو راه برای دستیابی به شفافیت وجود دارد: از طریق ویژگی opacity و background:rgba(). بیایید به هر یک از آنها نگاه کنیم و سپس مقایسه کنیم.

1. ویژگی کدورت CSS برای شفافیت پس زمینه

CSS دارای ویژگی opacity است که با آن می توانید شفافیت تصاویر، متون، از جمله پس زمینه را تنظیم کنید.

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

کدورت: 0.5 // شفافیتکدورت: 0.2 // شی فقط 20 درصد قابل مشاهده استکدورت: 0.8 // جسم فقط 80 درصد قابل مشاهده است

بیایید به یک مثال با خاصیت opacity نگاه کنیم.

Текст также прозрачный

Этот код преобразуется на странице в следующее:

Текст также прозрачный

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Текст также прозрачный

Этот код преобразуется на странице в следующее.

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).

Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.

Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…

С помощью RGBa решение выглядит следующим образом:

1. Допустим, нам нужен синий фон с прозрачностью 50%.

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можно постараться и сделать более изящно:

Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF - полностью непрозрачный, 00 - прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

Использование RGBa не ограничивается только фоновым цветом у блоков…