۶۸ بازدید
۱۷ فروردین ۱۳۹۷آموزشیتکنولوژی
تصویر مطالب

سلام خدمت دوستان و همراهان همیشگی ای دانش ،با سری آموزش های CSS همراه شما عزیزان هستیم.در این جلسه قصد داریم به بررسی جلوه background در CSS بپردازیم.


پس زمینه یا background

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

1- background-color:تعیین رنگ پس زمینه .

2- background-image: تعیین تصویر پس زمینه.

3- background-repeat:تعیین نحوه ی تکرار پس زمینه.

4-background-attachment:تعیین نحوه ی قرار گیری پس زمینه.

5- background-position:تعیین موقعیت تصویر پس زمینه.


1-رنگ پس زمینه یا background-color

این خصوصیت رنگ پس زمینه یک المان یا صفحه را مشخص می کند.برای مثال اگر بخواهیم رنگ پس زمینه ی یک صفحه را به طور متعارف تعیین کنیم از روش زیر استفاده می کنیم:

در مثال بالا رنگ پس زمینه را رنگ بنفش در نظر گرفتیم.شماهم حتما امتحان کنید.

نکته:در CSS رنگ یک صفحه معمولا توسط مقادیر زیر تعیین می شود:

یک مقدار HEX مانند: 840084#

یک مقدار RGB مانند: (rgb(255,255,0

اسم رنگ مانند:red

یک مقدار RGBA مانند:(rgba(255,0,255,0.5.این مقدار کمی متفاوت تر از rgb است و در واقع یک خصوصیت دیگر به آن اضافه شده که میزان شفافیت را تعیین می کند.این مقدار شفافیت باید اعدادی بین 0 تا 1 باشد.


2-تصویر پس زمینه یا background-image

این خصوصیت در واقع تصویری را برای پس زمینه یک المان یا یک صفحه انتخاب می کند.در این خصوصیت تصویر به صورت پیش فرض تکرار می شود تا کل فضای المان یا صفحه را پر کند.در انتخاب تصویر برای پس زمینه باید دقت زیادی داشت تا مطالب کاملا بر روی آن خوانا باشند. در مثال زیر از یک تصویر برای پس زمینه صفحه استفاده شده است.

برای مشاهده تصویر پس زمینه ایجاد شده توسط کد بالا اینجا را کلیک کنید.


3-تکرار تصویر پس زمینه یا background-repeat

اگر مقدار این خصوصیت را برابر با repeat قرار دهیم همان حالت پیش فرض را نشان خواهد داد و در واقع تصویر هم افقی و هم عمودی تکرار خواهد شد.اما اگر بخواهیم تصویر تنها در حالت افقی تکرار شود باید از مقدار repeat-x برای این خصوصیت استفاده کرد.به همین ترتیب اگر بخواهیم تصویر تنها به حالت عمودی تکرار شود باید مقدار را برابر با repeat-y قرار دهیم.اگر هم نیاز به تکرار تصویر در هیچ حالتی نبود مقدار را برابر با no-repeat قرار می دهیم.در واقع این مقدار باعث می شود تصویر تنها یک مرتبه نمایش داده شود.


4-ثابت بودن یا نبودن تصویر یا background-attachment

با استفاده از این خصوصیت می توانید تنظیم کنید اگر صفحه اسکرول داشت و به سمت پایین یا بالا حرکت کردیم آیا تصویر پس زمینه در جای خود ثابت بماند یا خیر.این خصوصیت می تواند 3 مقدار را به خود بگیرد که در زیر توضیح داده شده اند:

نکته:خصوصیت local باعث می شود تا پس زمینه همراه با محتویات آن عنصر اسکرول شود، به عبارتی در صورتی که در صفحه از یک iframe استفاده کنیم پس زمینه به همراه محتویات آن iframe اسکرول می شود.


5-تعیین موقعیت تصویر یا background-position

موقعیت تصویر در صفحه یا پس زمینه یک المان توسط این خصوصیت تعیین می شود.مثال:

در مثال بالا تصویر در بالا و سمت راست صفحه نمایش داده می شود.


خصوصیت مختصر نویسی

تمام خصوصیاتی که در بالا برای پس زمینه گفته شد اگر به طور همزمان مورد استفاده قرار بگیرند زمان زیادی برای نوشتن آن ها باید صرف کرد و همچنین کدها فضای بیشتری را اشغال می کنند.به منظور کاهش حجم کدها و همینطور صرفه جویی در وقت این امکان وجود دارد که تمامی خصوصیات را تنها در یک خصوصیت تعریف کرد.خاصیت مختصر نویسی(shorthand property) ویژه ی پس زمینه همان background است .به خاطر داشته باشید که هنگام استفاده از خصوصیت مختصر نویسی، ترتیب مقادیر به صورت زیر خواهد بود:

1- background-color

2- background-image

3- background-repeat

4- background-attachment

5- background-position

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

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

نکته:هیچ اهمیتی ندارد اگر یکی از مقادیر استفاده نشود.

خب دوستان به انتهای این جلسه از آموزش css رسیدیم امیدوارم مورد استفاده قرار بگیرد.

cssآموزش cssآموزش طراحی وبطراحی وبتصویر زمینه