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

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

تصاویر پس زمینه HTML



تصاویر پس زمینه

تقریباً در هر المان HTML می توان تصویر پس زمینه را مشخص کرد.





برای افزودن تصویر پس زمینه به HTML ، از ویژگی background-image در CSS استفاده کنید .


تصویر پس زمینه روی المان HTML

برای افزودن تصویر پس زمینه به المان HTML ، می توانید از ویژگی styleاستفاده کنید:

مثال

تصویر پس زمینه را به المان اچ تی ام ال اضافه کنید

<div style="background-image: url('img_girl.jpg');">
خودتان آزمایش کنید»

همچنین می توانید یک تصویر پس زمینه را در <style> بوجود بیاورید:

مثال

یک تصویر پس زمینه را در المان سبک مشخص کنید:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
خودتان آزمایش کنید»

تصویر پس زمینه در یک صفحه

اگر می خواهید کل صفحه دارای تصویر پس زمینه باشد ، باید تصویر پس زمینه را روی المان <body> مشخص کنید: :

مثال

تصویر پس زمینه را به صفحه اچ تی ام ال اضافه کنید:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>
خودتان آزمایش کنید»

تکرار پس زمینه

اگر تصویر پس زمینه کوچکتر از المان باشد ، تصویر به صورت افقی و عمودی تکرار می شود تا زمانی که به انتهای المان برسد:

برای درک ، ببینید چه اتفاقی می افتد وقتی از یک تصویر کوچک به عنوان پس زمینه در داخل استفاده می کنیم در المان <div>:

ویژگی background-imageسعی می کند المان div را تا جایی که می شود پر کند

برای جلوگیری از تکرار شدن تصویر پس زمینه ، ویژگی تکرار پس زمینه background-repeat را روی تکرار نشدن no-repeat تنظیم کنید.

مثال

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
خودتان آزمایش کنید»

مثال

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
خودتان آزمایش کنید»

پوشش کامل پس زمینه

اگر می خواهید تصویر پس زمینه کل المان را بپوشاند ، می توانید ویژگی اندازه پس زمینه background-size را روی پوشش cover تنظیم کنید.

همچنین ، برای اطمینان از اینکه کل المان همیشه پوشیده شده باشد ، ویژگی پیوست background-attachment پس زمینه را روی ثابت fixed تنظیم کنید:

همانطور که مشاهده می کنید ، تصویر بدون کشش کل المان را پوشش می دهد ، تصویر حالت های اصلی خود را حفظ می کند

مثال

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
خودتان آزمایش کنید»

کشش زمینه

اگر می خواهید تصویر پس زمینه متناسب با کل المان باشد ، می توانید خاصیت پس زمینهbackground-size را روی 100% و 100% تنظیم کنید :

تغییر اندازه پنجره مرورگر را امتحان کنید ، خواهید دید که تصویر کشیده می شود ، اما همیشه کل عنصر را پوشش می دهد.

مثال

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>
خودتان آزمایش کنید»

از مثالهای بالا یاد گرفته اید که می توان با استفاده از خصوصیات پس زمینه CSS ، تصاویر پس زمینه را سبک کرد.

برای کسب اطلاعات بیشتر در مورد ویژگی های پس زمینه CSS ، آموزش پس زمینه CSS ما را مطالعه کنید. .







این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir