0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

حذف border تصاویر در برخی از مرورگرها

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1038
تاریخ بروزرسانی ۲۷ تیر ۱۳۹۸

حذف border تصاویر در مرورگرها

برخی از مواقع هنگامی که شما یک تصویر را بر روی یک صفحه­ ی وب لینک می دهید ، بعضی از مرورگرهای وب به­ طور خودکار یک حاشیه در اطراف تصویر اضافه می­ کنند. در این مقاله به معرفی روش­ هایی می­ پردازیم که با استفاده از آن­ ها بتوانیم این border تصاویر را از بین ببریم و یا ایجاد کنیم. برای حذف border تصاویر در برخی از مرورگرها ، دو روش مختلف css  وجود دارد.

چگونگی از بین بردن border دور عکس ها

حذف border دور عکس ها

از بین بردن border تصاویر

در روش اول می­ توان  css , style را به­ صورت داخلی به تگ img اضافه کرد. لذا برای از بین بردن border تصاویر باید مقدار border attribute تگ img را صفر و یا none در نظر گرفت.

<a href="#" target="_blank">
<img src="#" alt="example of image without a border" style="border: 0 or none;"> 
</a> 

 

با توجه به این­که روش اول (inline styles) مدت زمان زیادی است که دیگر استفاده نمی­ شود ، امروزه بهتر است برای نوشتن یک  style  از یک external stylesheet به جای اضافه کردن style به­ صورت مستقیم به تگ­ های html استفاده کرد. بنابراین برای از بین بردن border تصاویر ،  یک فایل با نام style.css ایجاد کرده و کد زیر را به آن اضافه می کنیم.

a img { border: 0; }

یا

a img { border: none ; }

حال باید stye.css به فایل html لینک شود تا محتویات نوشته شده در آن به محتویات فایل html اعمال گردد.

قرار دادن border برای تصاویر

در گذشته برخی از مرورگرها به­ طور خودکار یک border در اطراف تصاویر لینک شده اضافه می ­کردند، اما امروزه اکثر مرورگرهای مدرن این عمل را کاهش داده ­اند. حال اگر می­خواهید یک border در اطراف تصاویر پیوند اضافه کنید باید به­ صورت دستی style مربوطه را وارد نمایید. در این مقاله سه روش برای اضافه کردن border به یک تصویر لینک­ شده توضیح داده­ شده است. بهترین راه برای انجام این کار این است که از یک external style sheet استفاده کنید.

 

Inline Style

اولین روش برای اعمال border به تصاویر ، استفاده از روش inline styling استکه قبلا برای از بین بردن border تصاویر استفاده شد. با این حال در این مورد به جای حذف border تصاویر ، از یک Inline Styling برای ایجاد یک border استفاده می کنیم.

<a href="#"><img src="# "  style="border: 2px blue dashed;   border-radius: 10px; padding: 5px;"  alt="image description"> </a>

HTML Style Element

راه دوم برای رسیدن به همان نتیجه استفاده از HTML style element است. این روش شامل نوشتن css style و قرار دادن آن ­ها در head element می­ باشد. مزیت این روش این است که اگر بیش از یک تصویر در صفحه وجود داشته باشد style به­ طور خودکار به تمام تصاویر اعمال گردد.

<style> a img { border: 2px blue dashed;   border-radius: 10px;  padding: 5px; } </style>

External Style Sheet

سومین راه و بهترین راه استفاده از یک external style sheet است. با اضافه کردن style به یک external style sheet می ­توانیم style ها را به تعداد نامحدود از اسناد html اعمال نماییم.

a img {  border: 2px blue dashed;  border-radius: 10px;  padding: 5px;  }

لذا کد بالا را در یک فایل ساده­ ی متنی تایپ نموده و با نامی مانند style.css ذخیره می کنیم. سپس فایل style.css تگ لینک زیر به سند html خود پیوند می دهید.

<link rel="stylesheet" type="text/css" href="styles.css">

 

پایان

در این مقاله راه حل هایی بیان شد که برای حذف border تصاویر در برخی از مرورگرها کاربرد داشت. از توجهی که به این مقاله نمودید سپاسگذاریم و برایتان آرزوی موفقیت بیشتر داریم.

برای دریافت آموزش های بیشتر به کانال وب یار webyar_net@ بپیوندید.

 

مطالب مرتبط
دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *