عکس ها در CSS

P O U R I A

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
فهرست مطالب:

  1. قرار دادن عکس ها در وسط صفحه (در جهت افقی)، با کدهای CSS
  2. نمایش یک عکس در پس زمینه یک عنصر، با مشخصه background-image در CSS
 
P O U R I A

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
قرار دادن عکس ها در وسط صفحه (در جهت افقی)، با کدهای CSS

قرار دادن عکس ها در وسط صفحه (در جهت افقی)، با کدهای CSS

برای قرار دادن یک عکس در وسط صفحه (یا وسط عنصری که در آن قرار گرفته)، باید توسط کدهای CSS ، دو مشخصه زیر را برای آن بنویسیم :
display:block;
margin:auto;

به مثال زیر توجه کنید :

[h=4]مثال :[/h]
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#6666FF].image_class[/COLOR] [COLOR=#00AA00]{[/COLOR]
         [B]display[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]block[/COLOR][COLOR=#00AA00];[/COLOR]
         [B]margin[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]auto[/COLOR][COLOR=#00AA00];[/COLOR]
         [COLOR=#00AA00]}[/COLOR]                                       
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<img class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"image_class"[/COLOR] src[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"image-name.png"[/COLOR] /[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :[/h]
Untitled.jpg
 
P O U R I A

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
نمایش یک عکس در پس زمینه یک عنصر، با مشخصه background-image در CSS

نمایش یک عکس در پس زمینه یک عنصر، با مشخصه background-image در CSS

با استفاده از مشخصه background-image در CSS ، می توانیم یک عکس را در پس زمینه یک عنصر از صفحه قرار بدهیم. شیوه کلی به کار بردن مشخصه background-image ، به صورت زیر می باشد :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]background-image[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]url[/COLOR][COLOR=#00AA00]([/COLOR][COLOR=#FF0000][I]myImage.png[/I][/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]
در کد بالا فرض کرده ایم که عکس دارای نام myImage.png بوده و در پوشه حاوی فایل فعلی (فایلی که در حال اجرای کدهای آن هستیم) قرار دارد. اگر مسیر و نام فایل عکس، متفاوت باشد، باید به جای عبارت myImage.png ، مسیر مربوط به فایل عکس و نام آن را بنویسید.

هنگامی که مشخصه background-image را به کار می بریم، بهتر است که بعد از آن، با مشخصه background-repeat ، اینکه پس زمینه عنصر از تکرار آن عکس نمایش داده شود و یا تنها از یک بار نمایش آن تشکیل شده باشد را هم تعیین کنیم. برای مشخصه background-repeat ، موارد زیر را می توانیم تعیین کنیم (یکی را باید انتخاب کنیم) :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]background-repeat[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]no-repeat[/COLOR][COLOR=#00AA00];[/COLOR] 
[B]background-repeat[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]repeat[/COLOR][COLOR=#00AA00];[/COLOR] 
[B]background-repeat[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]repeat-x[/COLOR][COLOR=#00AA00];[/COLOR] 
[B]background-repeat[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]repeat-y[/COLOR][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]
حالت no-repeat :

عکس تکرار نمی شود و تنها یک بار در پس زمینه نمایش داده خواهد شد.

حالت repeat :

عکس هم در جهت افقی (horizontally) و هم در جهت عمودی (vertically)، تکرار می شود.

حالت repeat-x :

عکس فقط در جهت افقی (horizontally) تکرار می شود.

حالت repeat-y :

عکس فقط در جهت عمودی (vertically) تکرار می شود.

به مثال های زیر توجه کنید :

مثال :


کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
body [COLOR=#00AA00]{[/COLOR]
    [B]background-image[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]url[/COLOR][COLOR=#00AA00]([/COLOR][COLOR=#FF0000][I]myImage.png[/I][/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-repeat[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]no-repeat[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<p[COLOR=#00AA00]>[/COLOR]www[COLOR=#6666FF].kelidestan[/COLOR].com</p[COLOR=#00AA00]>[/COLOR]


</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
نتیجه :

Untitled.jpg
مثال :


کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
body [COLOR=#00AA00]{[/COLOR]
    [B]background-image[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]url[/COLOR][COLOR=#00AA00]([/COLOR][COLOR=#FF0000][I]myImage.png[/I][/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-repeat[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]repeat[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<p[COLOR=#00AA00]>[/COLOR]www[COLOR=#6666FF].kelidestan[/COLOR].com</p[COLOR=#00AA00]>[/COLOR]


</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
نتیجه :


Untitled.jpg

مثال :


کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
body [COLOR=#00AA00]{[/COLOR]
    [B]background-image[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]url[/COLOR][COLOR=#00AA00]([/COLOR][COLOR=#FF0000][I]myImage.png[/I][/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-repeat[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]repeat-x[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<p[COLOR=#00AA00]>[/COLOR]www[COLOR=#6666FF].kelidestan[/COLOR].com</p[COLOR=#00AA00]>[/COLOR]


</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
نتیجه :

Untitled.jpg
مثال :


کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
body [COLOR=#00AA00]{[/COLOR]
    [B]background-image[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]url[/COLOR][COLOR=#00AA00]([/COLOR][COLOR=#FF0000][I]myImage.png[/I][/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR]
    [B]background-repeat[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]repeat-y[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<p[COLOR=#00AA00]>[/COLOR]www[COLOR=#6666FF].kelidestan[/COLOR].com</p[COLOR=#00AA00]>[/COLOR]


</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
نتیجه :


Untitled.jpg
 
topman85

topman85

عضو جدید
ممنون از این توضیحات. واقعا مفید بودن. عذر می‌خوام در صورتی که بخوایم یه عکس، فرقی نمی کنه چه ساده و چه لینک دار، رو در یک موقعیت دلخواه در صفحه بذاریم باید چی کار کنیم؟
 
ahoora_96

ahoora_96

عضو جدید
P O U R I A گفت:
با استفاده از مشخصه background-image در CSS ، می توانیم یک عکس را در پس زمینه یک عنصر از صفحه قرار بدهیم.
کلیک کنید تا باز شود...

این نکته رو هم به آموزش شما اضافه می کنم که اینکار معمولا برای ایجاد عناصر فرم_textbox, radio button, checkbox و... _ با شکل سفارشی و دلخواه استفاده می شه. و البته اندازه تصویر هم باید متناسب با عنصر مورد طراحی باشه.
 
ahoora_96

ahoora_96

عضو جدید
مخاطب: topman85

برای تعیین موقعیت عناصر در صفحه پروپرتی های مختلفی می تونید به کار ببرید. Position- top-right-bottom-left- و همینطور تعیین موقعیت نسبت به عناصر دیگه صفحه: margine و padding
درصورتیکه با هریک از پروپرتی های نام برده آشنایی ندارید به سایت زیر رفته و از منوی سمت چپ Learn CSS رو انتخاب کرده و موارد نامبرده رو بررسی کنید. بهتون اطمینان میدم که جامع تر از این سایت برای یادگیری وجود نداره.

لینک سایت
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
Similar threads
Thread starter عنوان تالار پاسخ ها تاریخ
B ترکیب عکس و متن در html HTML , XHTML , CSS 1
P O U R I A نمایش عکس در HTML HTML , XHTML , CSS 5
mehrnoosh2010 چگونه باید کد html عکس ثابت را نوشت HTML , XHTML , CSS 1
Y مشکل در اجرای صوت و عکس در مرورگر HTML , XHTML , CSS 0
T رفع غلط املایی اشتباهات برنامه نویسی css html jquery php asp HTML , XHTML , CSS 0

Similar threads

بالا