زنگ 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
یک متن که داخل یک صفحه زرد قرار دارد
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
یک متن که داخل یک صفحه با تصویر زمینه قرار دارد
CSS
bg-img {
background-image: url('https://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;
نظرات