این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با تصاویر یا Images در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تصاویر یا Images در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با تصاویر یا Images در CSS
در زبان CSS خب ما تعداد زیادی ویژگی داریم که هر کدوم میبینی یکار خاصی رو انجام میدن ، حال در این جلسه میخواهیم با تعدادی از ویژگی هایی که در رابطه با تصاویر هستند باشون کار کنیم و نحوه عملکردشون رو یاد بگیریم.
در ادامه میخوام با ویژگی هایی زیر آشنا شوید :
- background-image : تصویر زمینه
- border-image : کشیدن تصویر بجای خط به دور لبه عنصر
- list-style-image : تصویر بجای شکل علامت گذاری آیتم های لیست
Free-Learn
استفاده از background-image
با استفاده از ویژگی background-image میتوان به راحتی یک تصویر / عکس رو به عنوان تصویر پس زمینه یک تگ تنظیم کرد.
|
1 2 3 4 5 6 7 |
<style> body{ background-image:url("files/girls-2.png"); } </style> |
Free-Learn
کار با ویژگی Border-Image در CSS
همونطور که در جلسات قبل خواندیم یک ویژگی داریم به اسم Border که با استفاده از آن میتوان یک خط به دور لبه یک عنصر کشید، حال ما با استفاده از ویژگی border-image میتونیم بجای این خط یک تصویر بگذاریم.
مثال : کشیدن یک عکس به دور لبه یک عنصر
|
1 2 3 |
.MyText{ border-image:url('files/bg-border.png') 40 round; } |
Free-Learn
کار با ویژگی List-Style-Image در CSS
با استفاده از این ویژگی میتوان بجای شکل علامت گذاری آیتم های لیست ها، از تصاویر استفاده نماییم.
مثال : گذاشتن عکس بجای شکل علامت گذاری آیتم های لیست
|
1 2 3 4 5 6 7 |
<style> ul.MyList{ list-style-image: url('files/tick.png'); } </style> |
