زنگ CSS: جلسه چهارم - پشت زمینه در CSS

زنگ CSS: جلسه چهارم - پشت زمینه در CSS

یکی از مهمترین امکانات صفحات وب امکان انتخاب صفحه یا رنگ برای پس‌زمینه است. موضوعی که به راحتی هر چه تمام‌تر انجام می‌شود و طراحی صفحه شما را با تغییرات چشمگیری همراه می‌کند. برای یادگیری این کار با ما همراه باشید. 

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

پشت زمینه در CSS

یکی از موارد بسیار پر استفاده در CSS استفاده از پشت زمینه‌های متنوع است. در واقع شما در این زبان می‌توانید به هر المانی، عکس یا رنگ یا کادر دلخواه بدهید. قبل از آموزش رنگ‌آمیزی یا قرار دادن عکس در پشت زمینه المان‌های اچ‌تی‌ام‌ال، نحوه‌ی انتخاب رنگ‌ها را برای المان‌ها مرور می‌کنیم:

چگونگی اضافه کردن رنگ در سی‌اس‌اس: 

 روش اول -از طریق کد HEX:

در این مثال ابتدا علامت # قرار می‌دهیم و در جلوی آن کد شش رقمی رنگ را می‌نویسیم. برای به دست آوردن کد رنگ می‌توانید از فوتوشاپ یا سرویس‌های آنلاین استفاده کنید.  مثال" ff0000 #"

روش دوم - کد RGB رنگ:

در این حالت باید کد RGB‌ رنگ را بدهید. ابتدا کلمه rgb را می‌نویسیم. سپس یک پرانتز باز می‌کنیم و رنگ را به صورت کد آر‌جی‌بی در پرانتز و بین "" می‌نویسیم."(rgb(255,0,0"

روش سوم - نوشتن نام رنگ‌های پیش‌فرض:

ساده‌ترین راه انتخاب رنگ، نوشتن نام رنگ است. البته در این حالت انتخاب شما به رنگ‌های پیش‌فرض معمول محدود می‌شود.  - مثال : "red" برای رنگ قرمز یا blue برای رنگ آبی.

رنگ پس زمینه:

  • نام : background-color 
  • این ویژگی چه کاری انجام می‌دهد؟‌  تغییر رنگ پس‌زمینه المان‌های اچ‌تی‌ام‌ال
  • چه چیزهایی را در مقابلش بنویسیم؟ رنگ‌ها که به هر ۳ صورتی که در بالاتر مرور کردیم قابل استفاده هستند. 
  • نمونه نوشتن:  رنگ مورد نظر# : background-color  مثال۲ -  background-color:  #ff0000  مثال ۳- "(background-color: "rgb(255,0,0 مثال ۴- background-color: blue
  • خب حالا که با نوع دستور آشنا شدیم، وقت آن رسیده تا رنگ پس زمینه یک المان را تغییر دهیم. 

HTML

<div class="bg-yelllow"><p>یک متن که داخل یک صفحه زرد قرار دارد</p></div>

CSS

bg-yellow {

background-color: yellow;

}

یک متن که داخل یک صفحه زرد رنگ قرار دارد

 

عکس پس‌زمینه:

شما در سی‌اس‌اس و اچ تی ام ال می‌توانید تصویر پس زمینه یک المان را تغییر دهید. عکس پس زمینه در سی اس اس و اچ تی ام ال بدین صورت نوشته می‌شود:

  • نام: background-image
  • این ویژگی چه کاری انجام می‌دهد؟‌   تغییر تصویر پس زمینه  هر نوع المانی در اچ تی ام ال 
  • چه چیزهایی را در مقابلش بنویسیم؟ در این جا باید آدرس عکس مورد نظرتان را به سی‌اس‌اس بدهید. 
  • نمونه نوشتن:    ('آدرس دقیق و کامل عکس در اینترنت') background-image:   url
  • مثال:  ("background-image:    url ("zoomit.ir/axshoma.jpg

background-image: url("zoomit.ir/axshoma.jpg");

HTML

<div class="bg-img"><p>یک متن که داخل یک صفحه با تصویر زمینه قرار دارد</p></div>

CSS

bg-img {

background-image: url('http://www.zoomit.ir/media/k2/items/..ax.jpg');"

}

یک متن که داخل یک صفحه با تصویر زمینه قرار دارد

حتما دقت کنید که آدرس تصویر مورد نظر شما به صورت دقیق و با ذکر پسوند عکس در داخل پرانتز و بین "" نوشته شود. ("url.png")

تکرار تصویر پس زمینه:

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

background-image: url("zoomit.ir/bg.png");

background-repeat: repeat-x;

در اینجا ما بعد از وارد کردن دستور تصویر پس زمینه، گفته‌ایم که تصویر ما در جهت افقی x تکرار شود. این موضوع در حالتی که تصویر شما ابعاد کوچکتری‌ دارد آنقدر تکرار می‌شود تا کل پس زمینه شما را اشغال کند.

برای تکرار تصویر در جهت عمودی نیز تنها کافیست تا این کد را برای راستای y بنویسیم.  

background-image: url("zoomit.ir/bg.png");

background-repeat: repeat-y;

 همچنین اگر دوست نداشته باشید که تصویر شما تکرار شود، برای جلوگیری از تکرار عکس، تنها کافیست تا دستور زیر را بنویسید:

background-repeat:  no repeat;

 

از سراسر وب

  دیدگاه
کاراکتر باقی مانده

بیشتر بخوانید