خانه آموزش CSS آموزش قدم به قدم CSS آموزش کار با تصاویر یا Images در CSS

آموزش کار با تصاویر یا Images در CSS

توسط

۱۳۹۸-۰۷-۰۷

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تصاویر یا Images در CSS با من همراه باشید.

آموزش کار با تصاویر یا Images در CSS

Free-Learn

در این جلسه میخوانیم

1 کار با تصاویر یا Images در CSS
2 نحوه گذاشتن عکس در پس زمینه یک عنصر
3 کار با ویژگی Border-Image در CSS
4 کار با ویژگی List-Style-Image در CSS
5 کار با ویژگی Display در تصاویر
6 کار با ویژگی Float در CSS

کار با تصاویر یا Images در CSS

در این جلسه از آموزش CSS میخواهیم با تعدادی از ویژگی هایی CSS که در رابطه با تصاویر هستند باشون کار کنیم و نحوه عملکردشون رو یاد بگیریم.

در CSS خب ما تعداد زیادی ویژگی داریم که هر کدوم میبینی یکار خاصی رو انجام میدن، یعنی ما تعداد زیادی ویژگی داریم که میشه از آنها در نمایش تصاویر استفاه کرد.

ولی خب من فقط در اینجا چند مورد از ویژگی هایی که ممکنه بدردتون بخوره و یجورایی ضروری هست برای کار با تصاویر رو آموزش میدم.

در ادامه میخوام با ویژگی هایی زیر آشنا شوید :

background-image : گذاشتن عکس در پس زمینه یک عنصر
border-image : گذاشتن عکس در خط دور لبه عنصر
list-style-image : گذاشتن عکس به عنوان آیتم های یک لیست
display : برای مشخص کردن حالت نمایش یک عنصر
float : برای شناور کردن یک عنصر به چپ یا راست

Free-Learn

نحوه گذاشتن عکس در پس زمینه یک عنصر

با استفاده از ویژگی background-image میتوان به راحتی یک تصویر/عکس را به عنوان تصویر پس زمینه یک عنصر تنظیم کرد.

<style>
 
body{
 background-image:url("images/bg-1.jpg");
}
 
</style>

<style>

body{

background-image:url("images/bg-1.jpg");

}

</style>

امتحان کنید

مثال شماره ۲ : گذاشتن عکس در پس زمینه پاراگراف

<style>

p{
 background-image:url('images/bg-1.jpg');
}

</style>

<style>

background-image:url('images/bg-1.jpg');

}

</style>

امتحان کنید

Free-Learn

کار با ویژگی Border-Image در CSS

همونطور که در جلسات قبل خواندیم یک ویژگی داریم به اسم Border که با استفاده از آن میتوان یک خط به دور لبه ی یک عنصر کشید، حال ما با استفاده از ویژگی border-image میتونیم بجای این خط یک تصویر بگذاریم.

مثال :

<style>

p.test{
 border:10px solid transparent;
 border-image:url('bg-border.png') 30 round;
}

</style>

<style>

p.test{

border:10px solid transparent;

border-image:url('bg-border.png') 30 round;

}

</style>

امتحان کنید

Free-Learn

کار با ویژگی List-Style-Image در CSS

با استفاده از این ویژگی میتوان بجای شکل یا استایل (حالا عددی یا …) لیست ها، از تصاویر استفاده نماییم.

مثال :

<style>

ul {
 list-style-image: url('images/bg-list-style-type.png');
}

</style>

<style>

ul {

list-style-image: url('images/bg-list-style-type.png');

}

</style>

امتحان کنید

Free-Learn

کار با ویژگی Display در تصاویر

خب ویژگی display میتونه کاربردهای زیادی داشته باشه ولی خب در این مثال میخوام از این ویژگی استفاده کنم و حالت نمایش یک تصویر رو تغییر بدم.

یعنی چی حالت نمایش یه تصویر رو تغییر بدیم!؟ خب یک تصویر یا عکس که از طریق تگ IMG ایجاد میشه حالت نمایشش بصورت اینلاین یا درون خطی یا در واقع همون Inline می باشد.

یعنی اگه ما ۳ تا عکس بزاریم تو صفحه وبمون ۳ تاش کنار هم قرار میگیرن ولی خب من میخوام هر کدوم تو یه سطر قرار بگیره (یعنی بیان زیر هم قرار بگیرن نه کنار هم) پس میتونم از ویژگی display استفاده کنم و حالت نمایش عکس رو تغییر بدم.

مثال شماره ۱ : حالت نمایش عکس را از Inline به block تغییر میدهیم

<style>

img{
 display:block;
}

</style>

<style>

img{

display:block;

}

</style>

امتحان کنید

مثال شماره ۲ : مخفی کردن عکس

<style>

img{
 display:none;
}

</style>

<style>

img{

display:none;

}

</style>

امتحان کنید

مثال شماره ۳ : قرار دادن عکس در وسط صفحه (در حالت عادی نمیشه یک عکس رو وسط قرار داد)

<style>

img{
 display:block;
 margin:0 auto;
}

</style>

<style>

img{

display:block;

margin:0 auto;

}

</style>

امتحان کنید

Free-Learn

کار با ویژگی Float در CSS

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

مثال :

<style>

p{
 border:2px solid blue;
 padding:10px;
 overflow:hidden;
}

img.t1{
 float:left;
}

img.t2{
 float:right;
}

</style>

<style>

border:2px solid blue;

padding:10px;

overflow:hidden;

}

img.t1{

float:left;

}

img.t2{

float:right;

}

</style>

امتحان کنید