طراحی وب سایت در کرج
026-34204893
09101013858

آموزش CSS – پس زمینه در CSS

آموزش CSS – پس زمینه در CSS

آموزش CSS – پس زمینه در CSS طراحی سایت در کرج شرکت طراحی سایت کیان تجارت فاوا

پس زمینه در CSS

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

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

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

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

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

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

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

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

رنگ پس زمینه:

  • نام : background-color
  • این ویژگی چه کاری انجام می‌دهد؟‌  تغییر رنگ پس‌زمینه المان‌های HTML
  • چه چیزهایی را در مقابلش بنویسیم؟ رنگ‌ها که به هر ۳ صورتی که در بالاتر مرور کردیم قابل استفاده هستند.
  • نمونه نوشتن:  رنگ مورد نظر# : 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;

}

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

 

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

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

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

background-image: url(“KIANART/PIC.jpg”);

HTML

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

CSS

bg-img {

background-image: url(‘http://www.kianart.ir/media/b/items/..pic.jpg’);”

}

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

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

 

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

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

background-image: url(“kianart.ir/t.png”);

background-repeat: repeat-x;

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

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

background-image: url(“kianart.ir/t.png”);

background-repeat: repeat-y;

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

background-repeat:  no repeat;

 

پست مرتبط
HTML در CSS

HTML در CSS متن بیش از حد متناسب با زبان کلاسیک به سبک، دوم، قطعا به نظر می رسد بسیار با شکوه. اما کدام یک باید به شما کمک کند وب سایت خود را ایجاد کنید؟ همانطور که مرورگرهای وب توسعه داده اند، HTML در داخل وب سایت ها سخت تر شده است تا از […]

ادامه مطلب
css | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا
چرا شما باید از CSS استفاده کنید

چرا شما باید از CSS استفاده کنید به نظر می رسد وب مسترها بیشتر و بیشتر از CSS برای طراحی و طرح سایت خود استفاده می کنند، نه بسته به جداول و علامت گذاری به عنوان HTML. همچنین با توجه به اندازه صفحه و استفاده مجدد از قالب های CSS، کارآیی بسیاری از وبسایت ها […]

ادامه مطلب
سی اس اس | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا
مزایای SEO از CSS

مزایای SEO از CSS مانند بسیاری از طراحان وب دیگر، من شروع به ساخت صفحات وب با استفاده از ابزارهای گرافیکی کردم و شگفتی های جداول را برای طرح کشف کردم بدون آنکه کسی به من بگوید که از آنها استفاده کند. از آنجا که مرورگر پشتیبانی از سی اس اس  بهتر از آن است […]

ادامه مطلب

دیدگاهتان را بنویسید