توسط : در HTML، میتوانید تصاویر و تصاویر پسزمینه را به صفحات وب خود اضافه کنید تا آنها را جذابتر و بصریتر کنید. در این مقاله، به نحوه انجام این کار میپردازیم.
افزودن تصویر
برای افزودن تصویر به یک صفحه HTML، از تگ <img> استفاده کنید. این تگ دارای چند ویژگی مهم است:
- src: آدرس URL تصویر را مشخص میکند.
- alt: متن جایگزین تصویر را برای کاربرانی که نمیتوانند تصویر را ببینند، مانند افراد دارای معلولیت بینایی، ارائه میدهد.
- width: عرض تصویر را به پیکسل یا درصد مشخص میکند.
- height: ارتفاع تصویر را به پیکسل یا درصد مشخص میکند.
مثال زیر نحوه افزودن یک تصویر به یک صفحه HTML را نشان میدهد:
<img decoding="async" src="image.jpg" alt="This is an image" width="200" height="100">
افزودن تصویر پس زمینه
برای افزودن تصویر پس زمینه به یک عنصر HTML، از ویژگی background-image در CSS استفاده کنید. این ویژگی مقدار URL تصویر را به عنوان ورودی میگیرد.
مثال زیر نحوه افزودن تصویر پس زمینه به بدنه صفحه HTML را نشان میدهد:
<body data-rsssl=1 style="background-image: url('image.jpg');">
</body>
در مثال بالا، تصویر image.jpg به عنوان پس زمینه کل صفحه تنظیم میشود.
نکات:
- میتوانید از ویژگیهای
background-repeat،background-positionوbackground-sizeبرای کنترل نحوه نمایش تصویر پس زمینه استفاده کنید. - برای افزودن تصویر پس زمینه به یک عنصر خاص، مانند یک div، باید از selector مناسب در CSS استفاده کنید.
مثالها
در اینجا چند نمونه از نحوه استفاده از تصاویر و تصاویر پس زمینه در HTML آورده شده است:
- افزودن یک تصویر به عنوان سربرگ:
<header>
<h1>My Website</h1>
<img decoding="async" src="logo.png" alt="My Website Logo">
</header>
- افزودن تصویر پس زمینه به یک بخش:
<section style="background-image: url('background.jpg');">
<h2>This is a section</h2>
<p>This is some text in the section.</p>
</section>
- افزودن یک گالری تصاویر:
<div class="gallery">
<img decoding="async" src="image1.jpg" alt="Image 1">
<img decoding="async" src="image2.jpg" alt="Image 2">
<img decoding="async" src="image3.jpg" alt="Image 3">
</div>
با استفاده از تصاویر و تصاویر پس زمینه میتوانید صفحات وب خود را جذابتر و بصریتر کنید.
