آموزش کار با تصاویر یا Images در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تصاویر یا Images در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با تصاویر یا Images در CSS
در این جلسه از آموزش CSS میخواهیم با تعدادی از ویژگی هایی CSS که در رابطه با تصاویر هستند باشون کار کنیم و نحوه عملکردشون رو یاد بگیریم.
در CSS خب ما تعداد زیادی ویژگی داریم که هر کدوم میبینی یکار خاصی رو انجام میدن، یعنی ما تعداد زیادی ویژگی داریم که میشه از آنها در نمایش تصاویر استفاه کرد.
ولی خب من فقط در اینجا چند مورد از ویژگی هایی که ممکنه بدردتون بخوره و یجورایی ضروری هست برای کار با تصاویر رو آموزش میدم.
در ادامه میخوام با ویژگی هایی زیر آشنا شوید :
- background-image : گذاشتن عکس در پس زمینه یک عنصر
- border-image : گذاشتن عکس در خط دور لبه عنصر
- list-style-image : گذاشتن عکس به عنوان آیتم های یک لیست
- display : برای مشخص کردن حالت نمایش یک عنصر
- float : برای شناور کردن یک عنصر به چپ یا راست
Free-Learn
نحوه گذاشتن عکس در پس زمینه یک عنصر
با استفاده از ویژگی background-image میتوان به راحتی یک تصویر/عکس را به عنوان تصویر پس زمینه یک عنصر تنظیم کرد.
|
1 2 3 4 5 6 7 |
<style> body{ background-image:url("images/bg-1.jpg"); } </style> |
مثال شماره ۲ : گذاشتن عکس در پس زمینه پاراگراف
|
1 2 3 4 5 6 7 |
<style> p{ background-image:url('images/bg-1.jpg'); } </style> |
Free-Learn
کار با ویژگی Border-Image در CSS
همونطور که در جلسات قبل خواندیم یک ویژگی داریم به اسم Border که با استفاده از آن میتوان یک خط به دور لبه ی یک عنصر کشید، حال ما با استفاده از ویژگی border-image میتونیم بجای این خط یک تصویر بگذاریم.
مثال :
|
1 2 3 4 5 6 7 8 |
<style> p.test{ border:10px solid transparent; border-image:url('bg-border.png') 30 round; } </style> |
Free-Learn
کار با ویژگی List-Style-Image در CSS
با استفاده از این ویژگی میتوان بجای شکل یا استایل (حالا عددی یا …) لیست ها، از تصاویر استفاده نماییم.
مثال :
|
1 2 3 4 5 6 7 |
<style> ul { list-style-image: url('images/bg-list-style-type.png'); } </style> |
Free-Learn
کار با ویژگی Display در تصاویر
خب ویژگی display میتونه کاربردهای زیادی داشته باشه ولی خب در این مثال میخوام از این ویژگی استفاده کنم و حالت نمایش یک تصویر رو تغییر بدم.
یعنی چی حالت نمایش یه تصویر رو تغییر بدیم!؟ خب یک تصویر یا عکس که از طریق تگ IMG ایجاد میشه حالت نمایشش بصورت اینلاین یا درون خطی یا در واقع همون Inline می باشد.
یعنی اگه ما ۳ تا عکس بزاریم تو صفحه وبمون ۳ تاش کنار هم قرار میگیرن ولی خب من میخوام هر کدوم تو یه سطر قرار بگیره (یعنی بیان زیر هم قرار بگیرن نه کنار هم) پس میتونم از ویژگی display استفاده کنم و حالت نمایش عکس رو تغییر بدم.
مثال شماره ۱ : حالت نمایش عکس را از Inline به block تغییر میدهیم
|
1 2 3 4 5 6 7 |
<style> img{ display:block; } </style> |
مثال شماره ۲ : مخفی کردن عکس
|
1 2 3 4 5 6 7 |
<style> img{ display:none; } </style> |
مثال شماره ۳ : قرار دادن عکس در وسط صفحه (در حالت عادی نمیشه یک عکس رو وسط قرار داد)
|
1 2 3 4 5 6 7 8 |
<style> img{ display:block; margin:0 auto; } </style> |
Free-Learn
کار با ویژگی Float در CSS
با استفاده از این ویژگی میتوان عناصر رو بصورت شناور در سمت راست یا چپ قرار داد ،یعنی مثلا میتونیم یک عکس رو بندازیم سمت راست بصورت شناور قرار بگیره.
مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> p{ border:2px solid blue; padding:10px; overflow:hidden; } img.t1{ float:left; } img.t2{ float:right; } </style> |
