با سلام خدمت خوانندگان عزیز سایت وبلاگ. امروز ما به پنج قانون CSS نگاه خواهیم کرد که به شما امکان می‌دهد برای هر عنصر در Html یک پس‌زمینه تنظیم کنید - موقعیت پس‌زمینه (تصویر، تکرار، رنگ، پیوست). خوب، فراموش نکنیم که به قانون ترکیب Background نیز اشاره کنیم.
هیچ چیز دشواری در این مورد وجود ندارد، اما ظرافت ها و ظرافت های خاصی وجود دارد که باید در مورد یک قالب آماده بدانید (به یاد داشته باشید که به باز کردن تمام نکات و جزئیات هر طراحی کمک می کند).
اجازه دهید یک بار دیگر به شما یادآوری کنم که این مقاله بخشی از یک سری است و بهتر است ابتدا یادگیری نشانه گذاری سبک را شروع کنید، یعنی با مقاله ای در مورد اینکه CSS چیست و با چه چیزی خورده می شود، خوب، و سپس به ترتیب داده شده دنبال کنید. در مرجع. اگرچه، در هر صورت، این به شما بستگی دارد، اما اکنون اجازه دهید در مورد تنظیم پس زمینه صحبت کنیم.
رنگ، رنگ پس زمینه و تصویر پس زمینه
بیایید ابتدا ببینیم که چگونه رنگ عناصر Html با استفاده از آن تنظیم می شود قوانین رنگ Css... در واقع، همه چیز در اینجا ساده است. سینتکس کاملاً عادی است و می توانید رنگ را مطابق با نحوه انجام آن در زبان نشانه گذاری فرامتن تنظیم کنید. همانطور که به یاد دارید، پس از علامت هش (هش - "# fe35a3")، یا با استفاده از سه رقم، اگر عدد اول با مقدار دوم مطابقت دارد، عدد سوم به ترتیب با عدد چهارم، خوب و عدد پنجم با عدد ششم مطابقت دارد. (کد رنگ "# aa33ff" را می توان به اختصار "a3f" نشان داد).
همچنین، رنگ‌ها در کد Html و Css را می‌توان به صورت کلمات نشان داد (به عنوان مثال، "قرمز")، اما کد هگزا دسیمال اغلب استفاده می‌شود:
رنگ: #303
به عنوان مثال، من این پاراگراف کوچک را با همان رنگ بالا (# 303) رنگ آمیزی کرده ام. اکنون کمی با رنگ تمام پاراگراف‌های دیگر متفاوت است (تیره‌تر) که در فایل CSS موضوع وردپرسی که استفاده می‌کنم به عنوان شماره 555 تنظیم شده است. اما تنظیم رنگ از طریق رنگ بسیار ساده است، اما با پس زمینه کمی پیچیده تر خواهد بود.
بنابراین، برای پس زمینه در cssپنج قانون وجود دارد که در صورت تمایل می توان آنها را در یک تیم ترکیب کرد. برای دیدن آنها می توانید به صفحه مشخصات فعلی کنسرسیوم W3C بروید و هر چیزی را با کلمه Background در آنجا جستجو کنید:
- رنگ پس زمینه - این قانون رنگ پس زمینه را برای هر عنصر Html تنظیم می کند. در آن می توانید از کد یا نام سایه استفاده کنید. همه چیز دقیقاً همانطور که هنگام استفاده از رنگ بود است.
تصویر پس‌زمینه - با آن می‌توانید از یک تصویر به عنوان پس‌زمینه استفاده کنید (اما حتماً در مورد آن مطالعه کنید، زیرا تصاویر سنگین بارگذاری صفحه را کاهش می‌دهند)، مسیری که در عملکرد url () مشخص می‌شود.
اگر به مشخصات نگاه کنید، متوجه خواهید شد رنگ پس زمینه پیش فرضهر عنصری شفاف خواهد بود (مقدار پیش‌فرض قانون «رنگ پس‌زمینه: شفاف» است). با این حال، در عناصر به طور پیش فرض غیر شفاف خواهد بود، زیرا اینها عناصر سیستم هستند و همه چیز متفاوت و متفاوت از برچسب های معمول زبان نشانه گذاری فرامتن هستند.
رنگ در رنگ پس‌زمینه به‌عنوان استاندارد تنظیم می‌شود (شش یا سه رقم از یک کد هگزادسیمال یا یک کلمه):
رنگ زمینه: #FEFCDE
برای مثال، پس‌زمینه این پاراگراف دقیقاً از طریق رنگ پس‌زمینه با کد رنگی که دقیقاً در بالا داده شده است، تنظیم می‌شود.
تمام چهار قانون دیگر CSS فقط برای تصویر پس‌زمینه اعمال می‌شوند که می‌توان آن را برای هر عنصر Html تنظیم کرد و در صورت تمایل، می‌توان آن را دقیقاً در موقعیت قرار داد. می توان با استفاده از کدام فایل گرافیکی استفاده کرد تصویر پس زمینه.
اگر به مشخصات زبان نشانه‌گذاری سبک نگاه کنید، می‌بینید که تصویر پس‌زمینه پیش‌فرض "none" است (یعنی از تصویر پس‌زمینه استفاده نمی‌شود). خوب، اگر هنوز به آن نیاز دارید، در url () تابعی باید مسیر آن را مشخص کنید:
Background-image: url (https: //site/image/comment_top_focus.gif)؛
به عنوان مثال، برای این پاراگراف از یک فایل گرافیکی با پس زمینه استفاده کردم که مسیر آن دقیقاً در بالا توضیح داده شده است. می بینید که کل منطقه اختصاص داده شده برای این پاراگراف با یک تصویر تکراری پوشیده شده است که در تصویر اصلی به این صورت است:
آن ها وقتی فقط از یک قانون تصویر پس‌زمینه استفاده می‌کنیم که مسیر فایل گرافیکی را نشان می‌دهد، این تصویر هم به صورت عمودی و هم افقی ضرب می‌شود تا جایی که کل ناحیه اختصاص‌یافته در صفحه وب برای این عنصر Html خاص را پوشش دهد (در مثال ما، یک پاراگراف). چرا این اتفاق می افتد؟
Background-repeat - تصویر پس زمینه را تکرار کنید
بله، زیرا ما هیچ مقداری برای قانون CSS ننوشتیم. پس زمینه-تکرار، به این معنی که مقدار پیش فرض برای آن استفاده خواهد شد. با نگاهی به مشخصات، متوجه می شویم که این مقدار با "repeat" (تکرار تصویر در تمام محورها) مطابقت دارد. جواب خود به خود آمد.
بنابراین، با Background-repeat می توانیم تکرارهای تصویر پس زمینه را مدیریت کنید... این قانون فقط می تواند چهار مقدار داشته باشد:
موقعیت پس زمینه - موقعیت پس زمینه
حال این سوال پیش می‌آید که آیا می‌توان تصویر پس‌زمینه را از گوشه سمت چپ بالای منطقه دور کرد و اندازه عنصر را محدود کرد. البته می توانید و برای این منظور قانون جداگانه ای وجود دارد موقعیت پس زمینه:
با نگاهی به مشخصات CSS، مشخص می‌شود که چرا تصویر پس‌زمینه پیش‌فرض دقیقاً در لبه سمت چپ بالای منطقه عنصر Html قرار گرفته است. زیرا مقدار "0% 0%" پیش‌فرض قانون موقعیت پس‌زمینه است.
خوب، زمانی که این قانون به صراحت برای یک عنصر مشخص نشده باشد (مانند مورد ما)، آنگاه مرورگر مقداری را انتخاب می کند که در مشخصات به طور پیش فرض پذیرفته شده است (توجه داشته باشید که محورهای مختصات در CSS فقط از لبه سمت چپ بالای صفحه گزارش می شوند. عنصر مساحت).
همچنین از مشخصات مشخص می شود که هم مقادیر نسبی (درصد) و هم مقادیر مطلق (به عنوان مثال) می توانند برای قرار دادن تصویر پس زمینه با استفاده از موقعیت پس زمینه استفاده شوند. خوب، شما همچنین می توانید از کلماتی استفاده کنید که با مقادیر عددی خاصی مطابقت دارند. اما اول از همه.
هنگام تنظیم موقعیت تصویر پس زمینه با استفاده از واحدهای مطلقدر موقعیت پس زمینه، اصل زیر برای تعیین موقعیت نهایی آن صورت می گیرد:
آن ها مرورگر جابجایی های مشخص شده را در امتداد محورهای X و Y از مبدا ناحیه ای که شی در آن قرار دارد تا مبدا همین تصویر محاسبه می کند. به عنوان مثال، در این پاراگراف، من تصویر پس زمینه را از نظر موقعیت پس زمینه با استفاده از قوانین CSS زیر قرار داده ام:
Background-image: url (https: //site/image/logo.png)؛ background-repeat: no-repeat; موقعیت پس زمینه: 400px 25px.
لطفاً توجه داشته باشید که در این حالت با مرکز نمای در تراز خواهد شد و نه با مرکز ناحیه اختصاص داده شده برای این پاراگراف ها. واضح است که در واقعیت چنین ترتیبی از تصویر پس زمینه بعید است کاربرد پیدا کند.
با این حال، اگر موقعیت پس‌زمینه ثابتی را برای عناصری مانند Body یا Html تنظیم کنید (یعنی در برچسب‌هایی که کل صفحه وب را پوشش می‌دهند)، این تصویر همیشه در viewport قابل مشاهده خواهد بود و این دقیقاً همان چیزی است که ویژگی پس‌زمینه پیوست CSS است. در طرح بلوک مدرن پیدا می کند.
آیا مقدار بیشتری وجود دارد پس زمینه قانون پیش ساخته، که به شما امکان می دهد هر پنج قانون توضیح داده شده در بالا را در یک بطری ترکیب کنید. علاوه بر این، مقادیر برای هر پنج در نسخه پیش ساخته را می توان به هر ترتیب و در هر مقداری استفاده کرد (آنها منحصر به فرد هستند و مرورگر آنها را با یکدیگر اشتباه نمی گیرد). هر چیزی را که به صراحت مشخص نکنید، مرورگر برابر با مقدار پیش فرض در نظر می گیرد.
Png) بدون تکرار 50%؛
قانون مونتاژ نشان داده شده در مثال برای وضوح در این پاراگراف اعمال می شود. معلوم شد زیبا نیست، اما این چیز اصلی نیست. برای این پاراگراف، از یک پس‌زمینه زرد عجیب و همچنین تصویری از لوگوی LiveInternet استفاده شده است که در مرکز پاراگراف تراز شده است. زیرا هیچ مقداری برای قانون پیوست پس‌زمینه مشخص نشده است، سپس از مقدار پیش‌فرض اسکرول استفاده می‌شود.
اگر برای برخی از عناصر می‌خواهید فقط یک رنگ را پر کنید و به تصویر پس‌زمینه خود زحمتی ندهید، ممکن است به جای این موارد:
رنگ زمینه: #FEFCDE
نوشتن:
زمینه: #FEFCDE
برای تمام مقادیر دیگر قانون ترکیبی به طور پیش فرض گرفته می شود، و این همان چیزی است که شما نیاز دارید.
موفق باشی! به زودی شما را در صفحات سایت وبلاگ می بینیم
با رفتن به اینجا می توانید ویدیوهای بیشتری را تماشا کنید");">
ممکن است علاقه مند باشید
سبک لیست (نوع، تصویر، موقعیت) - قوانین Css برای سفارشی کردن ظاهر لیست ها در کد Html نحوه تنظیم رنگ پس‌زمینه متناوب ردیف‌های جداول، لیست‌ها و سایر عناصر Html در یک سایت با استفاده از کلاس شبه nth-child 
موقعیت (مطلق، نسبی و ثابت) - روش های قرار دادن عناصر Html در CSS (قوانین چپ، راست، بالا و پایین) 
شناور و پاک کردن در CSS - ابزارهای طرح بندی بلوک 
تعیین موقعیت با شاخص Z و قانون مکان نما CSS برای تغییر مکان نما
با کمک رنگ CSS و پس زمینهشما می توانید تقریباً هر عنصر یک صفحه وب را تنظیم کنید، آزادانه تصویر پس زمینه، تکرار آن را به صورت افقی و عمودی کنترل کنید. علاوه بر این، با استفاده از CSS، می توانید با استفاده از موقعیت یابی، یک تصویر پس زمینه را در هر نقطه از صفحه قرار دهید. هنوز زیاد فرار نکنیم، به ترتیب برویم.
ویژگی COLOR
این ویژگی رنگ عنصر، به طور خاص، رنگ متن داخل عنصر را تعیین می کند. مقدار در یکی از اشکال ممکن مشخص شده است:
- نام رنگ (سبز، سیاه، قرمز ...)؛
- کد رنگ هگزادسیمال (008000, 000000, FF0000 ...);
- کد رنگ اعشاری در RGB (رنگ: rgb (40، 175، 250))؛
ویژگی COLOR به ارث می رسد و اگر مقداری برای هیچ عنصری مشخص نشده باشد، مقدار از جد آن به ارث می رسد. اما ممکن است معلوم شود که برای جد نیز مشخص نشده است - سپس صفحه سبک مرورگر با استفاده از مقادیر پیش فرض اعمال می شود. رنگ عنصر در این مورد به احتمال زیاد سیاه خواهد بود.
همانطور که قبلاً اشاره کردم، می توانید رنگ را برای تقریباً همه عناصر تنظیم کنید، این رنگ می تواند (H1 ... H6)، (قوی، em) و حتی اعداد صحیح (p) و حتی حاشیه های جدول باشد، اما بعداً در مورد آن بیشتر توضیح خواهیم داد.
بیایید نمونه ای از تنظیم رنگ متن با استفاده از CSS را ببینیم:
h1 (رنگ: آبی)
در این مثال، تمام هدرهای سطح اول صفحه وب آبی خواهند بود:
قوی (رنگ: قرمز)
در این صورت هر آنچه در متن صفحه وجود دارد با یک تگ برجسته می شود قوی، قرمز می شود.
می توان اینگونه نوشت:
h1، p، قوی (رنگ: سبز)
سپس سرفصل های سطح اول، تمام پاراگراف ها و هر چیزی که توسط تگ مشخص می شود سبز می شود.
هنگامی که نیاز به برجسته کردن سرفصل ها در رنگ های مختلف باشد، از انتخابگرهای کلاس استفاده می شود. برای تعریف کلاس در HTML از ویژگی استفاده کنید کلاسکه برای هر عنصری قابل اعمال است. در کد HTML باید بنویسید:
class = "آبی"> رنگ سرصفحه های این کلاس آبی خواهد بود
در شیوه نامه CSS، در این مورد، یک قانون می نویسیم که در آن انتخابگر عنصر H1 خواهد بود و از طریق نقطه ( . ) نام کلاس:
h1.آبی (رنگ: آبی)
در اسناد HTML، انتخابگرهای شناسه نیز استفاده می شود، آنها با ویژگی تعیین می شوند شناسه... شناسه از کلاس مهمتر یا اولویت بندی شده است. و اگر هم کلاس و هم شناسه در کد HTML برای عنصر مشخص شده باشند، سبک شناسه اعمال خواهد شد. شناسه با علامت هش ( # ). برای استفاده از شناسه در کد HTML، باید بنویسید:
id = "آبی"> رنگ سربرگ این شناسه آبی خواهد بود
در شیوه نامه، به نوبه خود:
h1 # آبی (رنگ: آبی)
اموال پس زمینه-COLOR
این ویژگی به شما اجازه می دهد تا رنگ پس زمینه صفحه را به عنوان یک کل، پاراگراف، پیوند، به طور کلی، برای هر عنصر HTML تنظیم کنید. برای این کار یک رنگ یا مقدار در مقدار خاصیت مشخص می شود. شفاف(شفاف). کد برای پس زمینه صفحه نوشته شده است:
بدنه (رنگ پس زمینه: آبی)
در این صورت پس زمینه صفحه فیروزه ای می شود و برای دادن پس زمینه به عنوان بنویسید:
h1 (رنگ پس زمینه: زرد)
پس زمینه زرد سرفصل های سطح اول را دریافت می کنیم.
رنگ CSS و پس زمینه
ویژگی پس زمینه-تکرار
این ویژگی زمانی استفاده می شود که مشخص شود آیا به صورت افقی و عمودی تکرار می شود. مقادیر معتبر:
- تکرار- تصویر به صورت عمودی و افقی تکرار می شود.
- تکرار-x- تصویر فقط به صورت افقی تکرار می شود.
- تکرار y- تصویر فقط به صورت عمودی تکرار می شود.
- بدون تکرار- تصویر تکرار نمی شود.
کد به این صورت نوشته شده است:
پ (
تصویر پس زمینه: آدرس اینترنتی ( آدرس فایل تصویری)
;
Background-repeat: repeat-x
}
متن این پاراگراف در بالای تصویر پس زمینه قرار می گیرد که به صورت افقی قرار می گیرد.
املاک پس زمینه
از این ویژگی برای اطلاع به مرورگر استفاده می‌شود که آیا تصویر پس‌زمینه صفحه باید با متن حرکت کند ( طومار) یا بی حرکت بمانید ( درست شد).
بدن (
تصویر پس زمینه: آدرس اینترنتی ( آدرس فایل تصویری)
;
background-repeat: repeat-x;
پس زمینه-پیوست: ثابت
}
در این حالت تصویر پس زمینه ثابت می ماند.
اموال BACKGROUND-POSITION
این ویژگی برای قرار دادن تصویر نسبت به. مقادیر بر حسب درصد (%)، واحد طول (cm، px)، با کلمات کلیدی مشخص می‌شوند:
- عمودی:
- بالا- بالای تصویر با لبه بالای صفحه یا بلوک تراز شده است.
- مرکز
- پایین- پایین تصویر با لبه پایین صفحه یا بلوک تراز شده است.
- به صورت افقی:
- ترک کرد- لبه سمت چپ تصویر با لبه سمت چپ صفحه یا بلوک تراز شده است.
- مرکز- مرکز تصویر با مرکز صفحه یا بلوک تراز شده است.
- درست- لبه سمت راست تصویر با لبه سمت راست صفحه یا بلوک تراز شده است.
ما یک کد نمونه در درصد، واحد طول و کلمات کلیدی می نویسیم:
بدن (
تصویر پس زمینه: آدرس اینترنتی ( آدرس فایل تصویری)
;
موقعیت پس زمینه: 0% 0%
}
بدن (
تصویر پس زمینه: آدرس اینترنتی ( آدرس فایل تصویری)
;
موقعیت پس زمینه: 10px 25cm
}
بدن (
تصویر پس زمینه: آدرس اینترنتی ( آدرس فایل تصویری)
;
پس زمینه موقعیت: مرکز بالا
}
یکی از رایج ترین کارها هنگام ویرایش متن و بلوک در HTML و CSS است. نه تنها طراح صفحه، بلکه هر مدیر محتوایی که محتوای سایت را ویرایش می کند، می تواند با آن مواجه شود. برای حل این موضوع فقط از دو ویژگی رنگ - رنگ متن، پس زمینه - کار با پس زمینه، رنگ یا تصویر استفاده می شود.
کار با Test Color در CSS
رنگیک ویژگی است که برای تعیین رنگ فقط برای متن مورد نیاز است. رنگ را می توان هم در قالب کد HTML HEX و هم در قالب RGB (قرمز سبز آبی) مشخص کرد. کدهای رنگ را می توان در برنامه های گرافیکی مانند فتوشاپ یا آنلاین انتخاب کردنحو ویژگی:
رنگ: رنگ؛
اکنون ویژگی را اعمال می کنیم:
محتوا (
رنگ: # 444; // متن خاکستری تیره در یک عنصر با محتوای کلاس
}
چرا چنین مثالی: تعیین رنگ برای پیوند و متن دو چیز متفاوت هستند. یاد آوردن. خوب، من به تنهایی توصیه می کنم رنگ متن و پیوندها را با رنگ های مختلف تهیه کنید.
کار با پس زمینه در CSS
زمینهیک ویژگی است که به شما امکان می دهد با پس زمینه یک تصویر کار کنید: رنگ پس زمینه را تنظیم کنید، یک تصویر را به عنوان پس زمینه تنظیم کنید (فرمت های jpg، gif، png)، تغییر موقعیت پس زمینه و سایر پارامترها که در زیر توضیح داده شده است.رنگ پس زمینه- این ویژگی فقط برای تنظیم رنگ پس زمینه استفاده می شود. فقط کد رنگ را می پذیرد. رنگ را می توان در قالب RGB (قرمز سبز آبی) یا در قالب کد HTML HEX مشخص کرد.
مسدود کردن (
پس زمینه رنگ: # fbb5b5; // یک رنگ مایل به قرمز پاستلی برای پس زمینه تنظیم کنید
}
بهترین نمونه رنگ ها برای پس زمینه (مدل های طراحی مدرن: طراحی تخت و غیره):
تصویر پس زمینهیک ویژگی است که برای تنظیم برخی از تصاویر به عنوان پس زمینه در یک عنصر استفاده می شود. برای تعیین تصویر، پارامتر url و مسیر تصویر نسبت به فایل با css-styles کافی است.
#بازگشت (
background-image: url ("تصاویر / fon.jpg")؛
}
پس زمینه-تکرار- فقط زمانی قابل استفاده است که ویژگی background-image در بالا مشخص شده باشد. این ویژگی قانون تکرار تصویر را تنظیم می کند. به طور پیش فرض، تصویر در محور X و محور Y تا مرزهای عنصر تکرار می شود (اگر پس زمینه کوچکتر از عنصر باشد). در ویژگی، می توانید تنظیمات را طوری تعیین کنید که تصاویر فقط در امتداد محور X - تکرار-x (افقی)، فقط در امتداد Y - تکرار-y (عمودی) یا اصلاً - بدون تکرار تکرار شوند.
#محتوا (
background-repeat: repeat-x; / * تصویر فقط به صورت افقی تا مرزهای بلوک تکرار می شود * /
}
پس زمینه-پیوست- پس زمینه را در یک موقعیت ثابت می کند، یعنی تصویر همراه با محتویات بلوک اسکرول می شود یا ثابت می ماند. پیش فرض اسکرول است که موقعیت پس زمینه را ثابت نمی کند.
#محتوا (
background-image: url ("background.jpg");
background-repeat: repeat-x; / * تصویر فقط به صورت افقی تکرار می شود * /
پس زمینه-پیوست: ثابت. / * به مکان پین شده * /
}
موقعیت پس زمینه- خاصیتی که موقعیت پس زمینه را در عنصر تعیین می کند. دو مقدار داده می شود: موقعیت افقی و سپس موقعیت عمودی. یا به صورت دیجیتال (پیکسل و درصد) و یا با حروف (چپ، مرکز، راست، بالا، پایین) تنظیم می شود. این ویژگی زمانی مورد نیاز است که تصویر تکرار نشود (بدون تکرار)، و پس‌زمینه باید به روش خاصی در عنصر قرار گیرد.
#مسدود کردن (
پس زمینه موقعیت: سمت چپ مرکز. / * افقی - در سمت چپ، عمودی - در وسط * /
}
من فکر می کنم همه چیز در نظرات واضح است)
نمونه ای از نوشتن یک مقدار عددی:
#کلیدها (
موقعیت پس زمینه: 109px 57px. / * حاشیه سمت چپ 109 پیکسل، بالا 57 پیکسل * /
}
اینجا هم فکر می کنم همه چیز باید روشن باشد.
بسیاری از خواص؟ نحوه نوشتن به صورت مخفف را ببینید.
در نهایت. خلاصه CSS برای پس زمینه
شما می توانید از یک نماد اختصاری استفاده کنید، که در آن تمام پارامترها در یک خط مشخص می شوند:پس زمینه: تصویر رنگی تکرار موقعیت پیوست.
در مورد جوانب مثبت نوشتن به این صورت زمان بارگذاری صفحه و رندر مرورگر را کاهش می دهد. به بازدیدکنندگان رحم کنید، بهتر است اینگونه یادداشت کنید، البته اگر به چندین ملک نیاز دارید.
بله، در صورت عدم نیاز، می توانید از هر ملکی بگذرید! شما فقط به تعیین مقادیر در پایین لیست ادامه دهید.
مسدود کردن (
پس‌زمینه: # URL f1f1f1 ("background.jpg") repeat-x اسکرول 100px 125px;
}
نمونه ای از نحوه کار پس زمینه در CSS
کد نمونه نتیجه کار و سورس کد را می توانید در لینک زیر مشاهده کنید.