Javascript Disabled!

Please Enable Javascript if you disabled it, or use another browser we preferred Google Chrome.
Please Refresh Page After Enable

Powered By UnCopy Plugin.

نحوه تنظیم تصویر همپوشانی با رنگ در CSS


تکنیک همپوشانی در CSS راهی برای انتقال متن بر روی تصاویر است. CSS “تصویر پس زمینه” و CSS ”زمینه” برای دستیابی به این اثر همپوشانی از خواص استفاده می شود. هدف این مقاله بررسی نحوه استفاده از CSS برای تنظیم یک تصویر همپوشانی با رنگ است.

نتایج این مقاله عبارتند از:

    • ویژگی پس زمینه تصویر در CSS چیست؟
    • ویژگی پس زمینه در CSS چیست؟
    • چگونه تصویر همپوشانی را با رنگ تنظیم کنیم؟

اجازه دهید ما شروع!

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

برای افزودن یک تصویر به عنوان پس‌زمینه هر عنصر HTML، “تصویر پس زمینه” اموال قابل استفاده است.

نحو

نحو ویژگی background-image به صورت زیر است:

پس زمینه تصویر: آدرس تصویر();


نام تصویر یا مسیر کامل آن را در url() مشخص کنید.

Background Property در CSS چیست؟

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

نحو

نحو خاصیت پس زمینه:

رنگ پس زمینه | موقعیت | اندازه ;

    • رنگ: برای تعیین رنگ پس زمینه استفاده می شود.
    • موقعیت: برای تنظیم موقعیت پس زمینه استفاده می شود.
    • اندازه: برای تعیین اندازه پس زمینه استفاده می شود.

در اینجا یک مثال برای توضیح موضوع آورده شده است.

مثال: چگونه تصویر همپوشانی را با رنگ تنظیم کنیم؟

در این مثال ابتدا یک div با نام “پوششو در داخل div یک handing با تگ

اضافه کرده ایم:

<بدن>
<بخش کلاس=“پوشش”>
<h1>پوشش تصویرh1>
بخش>
بدن>


حالا با کمک CSS یک تصویر پس زمینه اضافه می کنیم. مانند “url()“، مسیر تصویر را داده ایم و عرض را اختصاص داده ایم “350 پیکسل، ارتفاع ”250 پیکسل“، و موقعیت “مطلق” از تصویر:

.تصویر {
پس زمینه: url(“image.jpg”) بدون تکرار؛
عرض: 350 پیکسل؛
ارتفاع: 250 پیکسل؛
موقعیت: مطلق;
}


این خروجی زیر را خواهد داشت:


حال، اجازه دهید یک قدم جلوتر برویم تا افکت همپوشانی را روی آن اعمال کنیم:

.پوشش{
پس زمینه: rgba(233، 140، 0، 0.7);
margin-top: 10px;
حاشیه سمت چپ: 55 پیکسل؛
عرض: 200 پیکسل؛
اندازه فونت: 25px;
رنگ: rgb(252، 80، 0);
موقعیت: مطلق;
}


در اینجا ما از ویژگی های مختلف CSS برای ارائه عملکردهای مختلف استفاده کردیم:

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

پس از اجرای موارد فوق، کد فایل HTML و CSS را ذخیره کرده و نتیجه را بررسی کنید:


ما روشی را برای تنظیم یک تصویر همپوشانی با رنگ در CSS ارائه کرده ایم.

نتیجه

با استفاده از CSS می توان به افکت همپوشانی دست یافت.تصویر پس زمینه” و CSS ”زمینه” خواص می توان آن را با اختصاص یک تصویر به ویژگی background-image و تنظیم رنگ در ویژگی پس زمینه انجام داد. علاوه بر این، این تکنیک ترکیب بیش از یک عنصر در یک ظرف واحد است. این پست نحوه تنظیم تصاویر همپوشانی با رنگ در CSS را با استفاده از مثال ها نشان می دهد.


به این مطلب امتیاز دهید

جهت ارسال نظر اینجا کلیک کنید.