آموزش استفاده از تصاویر در CSS
آموزش استفاده از تصاویر در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش استفاده از تصاویر در CSS خواهیم پرداخت.
تصاویر نقش مهمی در هر صفحه وب دارند. اگرچه توصیه نمی شود تصاویر زیادی در آن گنجانده شود، اما با این وجود استفاده از تصاویر خوب در هر کجا که لازم باشد مهم است.
CSS نقش خوبی در کنترل نمایش تصویر دارد. با استفاده از CSS می توانید مشخصات تصویر زیر را تنظیم کنید.
- از ویژگی border برای تعیین عرض حاشیه تصویر استفاده می شود.
- از ویژگی height برای تنظیم ارتفاع تصویر استفاده می شود.
- از ویژگی width برای تنظیم عرض تصویر استفاده می شود.
- از ویژگی –moz-opacity برای تنظیم تیرگی تصویر استفاده می شود.
ویژگی حاشیه تصویر
از ویژگی حاشیه تصویر برای تعیین عرض حاشیه تصویر استفاده می شود. این ویژگی می تواند مقداری از نظر طول یا٪ داشته باشد.
عرض صفر پیکسل به معنای عدم حاشیه است.
|
1 2 3 4 5 6 7 8 9 10 11 |
Live Demo <html> <head> </head> <body> <img style = "border:0px;" src = "/css/images/logo.png" /> <br /> <img style = "border:3px dashed red;" src = "/css/images/logo.png" /> </body> </html> |
خروجی به صورت زیر می باشد:
ویژگی ارتفاع تصویر
از ویژگی ارتفاع برای تنظیم ارتفاع یک تصویر استفاده می شود. این ویژگی می تواند مقداری از نظر طول یا٪ داشته باشد. در حالی که مقدار را به٪ می دهد ، آن را نسبت به کادری که تصویر در آن موجود است اعمال می کند.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" /> <br /> <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" /> </body> </html> |
خروجی به صورت زیر می باشد:
ویژگی عرض تصویر
از ویژگی عرض برای تنظیم عرض تصویر استفاده می شود. این ویژگی می تواند مقداری از نظر طول یا٪ داشته باشد. در حالی که مقدار را به٪ می دهد ، آن را نسبت به کادری که تصویر در آن موجود است اعمال می کند.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" /> <br /> <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" /> </body> </html> |
خروجی به صورت زیر می باشد:
ویژگی -moz-opacity
از ویژگی -moz-opacity یک تصویر برای تنظیم تیرگی تصویر استفاده می شود. این ویژگی برای ایجاد یک تصویر شفاف در موزیلا استفاده می شود. اینترنت اکسپلورر برای ایجاد تصاویر شفاف از فیلتر: (alpha (opacity = x استفاده می کند.
در Mozilla (-moz-opacity: x) x می تواند از 0.0 – 1.0 باشد. مقدار کمتر باعث شفافیت بیشتر عنصر می شود (برای کدورت نحوی معتبر CSS3 موارد مشابه: x).
در IE فیلتر: آلفا (opacity = x)) x) می تواند از 0 تا 100 باشد. مقدار پایین تر باعث شفافیت عنصر می شود.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 |
<html> <head> </head> <body> <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" /> </body> </html> |
خروجی به صورت زیر می باشد:
لیست جلسات قبل آموزش CSS
.svg)
دیدگاه شما