درباره Opacity CSS3 بدانید

ایجاد پس زمینه شفاف

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

چگونه از Opacity Property استفاده کنیم

امكان شفافیت مقدار شفافیت از 0.0 تا 1.0 می باشد.

0.0 100٪ شفاف است - هر چیزی که در زیر آن عنصر به طور کامل نمایش داده می شود. 1.0 است 100٪ مات و بدون عنصر زیر عنصر از طریق نشان می دهد.

بنابراین برای تعیین یک عنصر به 50٪ شفاف، می توانید بنویسید:

کدورت: 0.5؛

برخی از نمونه ها از کدورت را در عمل مشاهده کنید

مطمئنا در مرورگرهای قدیمیتر تست کنید

نه IE 6 و نه 7 از ویژگی کدورت CSS3 پشتیبانی می کنند. اما شما از شانس نیستید در عوض، اینترنت اکسپلورر یک فیلد آلفای محتوا را فقط مایکروسافت پشتیبانی می کند. فیلترهای آلفا در IE قبول مقادیر از 0 (کاملا شفاف) تا 100 (کاملا مات). بنابراین، برای شفافیت خود در اینترنت اکسپلورر، شما باید میزان شفافیت خود را با 100 برابر کنید و یک فیلتر آلفا را به سبک خود اضافه کنید:

فیلتر: آلفا (opacity = 50)؛

فیلتر آلفا را در عمل ببینید (فقط IE)

و از پیشوند مرورگر استفاده کنید

شما باید از prefix ها -moz- و -webkit استفاده کنید تا نسخه های قدیمیتر مرورگرهای موزیلا و Webkit نیز از آن حمایت کنند:

-webkit-opacity: 0.5؛
-moz-opacity: 0.5؛
کدورت: 0.5؛

اولا قبل از پیشوند مرورگر قرار دهید و آخرین ویژگی CSS3 معتبر باشد.

پیشوند مرورگر را در مرورگرهای موزیلا و Webkit قدیمی تر آزمایش کنید.

شما می توانید تصاویر را شفاف بیش از حد

کدورت را در تصویر خود تنظیم کنید و به پس زمینه محو شود. این واقعا برای تصاویر پس زمینه مفید است.

و اگر شما در یک تگ لنگر اضافه کنید، می توانید اثرات شناور را فقط با تغییر شفافیت تصویر ایجاد کنید.

a: hover img {
فیلتر: آلفا (opacity = 50)
فیلتر: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5؛
-webkit-opacity: 0.5؛
کدورت: 0.5؛
}

بر روی این HTML تاثیر می گذارد:

تست سبک های فوق و HTML در عمل.

متن را در تصاویر خود قرار دهید

با کدورت، شما می توانید متن بیش از یک تصویر قرار داده و تصویر ظاهر می شود که محو جایی که متن است.

این تکنیک کمی روی حیله و تزویر است؛ زیرا شما نمیتوانید تصویر را به راحتی محو کنید، زیرا کل تصویر را محو می کند. و شما نمی توانید کادر متن را محو کنید ، زیرا متن نیز در آن محو خواهد شد.

  1. ابتدا یک ظرف DIV ایجاد کنید و تصویر خود را داخل آن قرار دهید:

  2. تصویر را با یک DIV خالی دنبال کنید - این چیزی است که شما شفاف می کنید.


  3. آخرین چیزی که شما در HTML خود اضافه می کنید DIV با متن شما در آن است:



    این شستا سگ من است. آیا او ناز نیست
  4. شما آن را با موقعیت CSS سبک، برای قرار دادن متن بالای تصویر. من متن خود را در سمت چپ قرار دادم، اما شما می توانید آن را در سمت راست با تغییر دو سمت چپ قرار دهید: 0؛ خواص به سمت راست: 0؛ .
    #image {
    موقعیت: نسبی؛
    عرض: 170 پیکسل؛
    ارتفاع: 128 پیکسل؛
    حاشیه: 0؛
    }
    #text {
    موقعیت: مطلق؛
    بالا: 0؛
    سمت چپ: 0؛
    عرض: 60px؛
    ارتفاع: 118px؛
    پس زمینه: #fff؛
    padding: 5px؛
    }
    #text {
    فیلتر: آلفا (opacity = 70)؛
    فیلتر: progid: DXImageTransform.Microsoft.Alpha (opacity = 70)؛
    -moz-opacity: 0.70؛
    کدورت: 0.7؛
    }
    #words {
    موقعیت: مطلق؛
    بالا: 0؛
    سمت چپ: 0؛
    عرض: 60px؛
    ارتفاع: 118px؛
    پس زمینه: شفاف؛
    padding: 5px؛
    }

ببینید چطور به نظر میرسد