آموزش واترمارک گذاشتن روی تصاویر وب با HTML و CSS بصورت آنلاین
چگونه بر روی تصاویر وب Watermark بگذاریم؟ یک روش ساده برای ایجاد واترمارک روی تصویر در صفحات وب که تنها با استفاده از html و css قابل انجام هست اینه که از دو تگ تودرتو استفاده کنید. تگ اول یک تگ div باشه که خاصیت background-image اون برابر با آدرس تصویر اصلی بدون هیچ transparency یا opacity باشه(به div حتما باید ابعاد تصویر مورد نظر داده بشه وگرنه صرف داشتن بکگراند تگ div ابعاد نمیگیره و تهی فرض میشه). تگ دوم تگ img که درون تگ div قرار می گیره و خاصیت src اون دربرگیرنده آدرس تصویر واترمارک هست که این تگ باید دارای خاصیت opacity باشه مثلا با مقدار 0.5 تا تصویر بکگراند div والد از زیر اون دیده بشه. و هم اینکه از طریق css این تگ img می تونید position دقیق واترمارکتون رو مشخص کنید. مثال :
<div style=” background-image:url(images/pic.jpg); width:500px; height:auto;”> <img src=”watermark.png” alt=”watermark” style=”opacity:0.5;” /> </div>
نمونه تصویر :
- با این روش یک واترمارک شفاف در وسط تصویر اصلی می تونید ایجاد کنید.
- در این روش مشکل دسترسی مستقیم به url بکگراند div وجود داره تا تصویر بدون واترمارک توسط کاربر مشاهده و دستیابی بشه که می تونید به روش redirect به تصویر پیش فرض از طریق فایل htaccess کاربر رو از دسترسی مستقیم به تصویر بکگراند منع کنید.
- در این روش چنانچه کاربر روی تصویر کلیک راست کنه و گزینه view image رو انتخاب کنه فقط تصویر واترمارک رو مشاهده می کنه و امکان مشاهده تصویر اصلی وجود نداره مگر از طریق همون url بکگراند div که همونطور که گفته شد باید برای بی اثر نشدن watermark اون رو از دسترسی مستقیم توسط htaccess حفظ کنید.