ویژگی‌های مربوط به پس‌زمینه در CSS برای افزودن جلوه‌های بصری به پس‌زمینه عناصر HTML استفاده می‌شوند.
در این فصل‌ها، با ویژگی‌های زیر در CSS آشنا خواهید شد:
background-color (رنگ پس‌زمینه)background-image (تصویر پس‌زمینه)background-repeat (تکرار تصویر پس‌زمینه)background-attachment (نحوه اتصال تصویر پس‌زمینه)background-position (موقعیت تصویر پس‌زمینه)background (ویژگی خلاصه‌شده برای تنظیم چند ویژگی پس‌زمینه به‌صورت هم‌زمان)background-color در CSSویژگی background-color برای تعیین رنگ پس‌زمینه یک عنصر استفاده می‌شود.
در مثال زیر، رنگ پس‌زمینه صفحه با استفاده از عنصر <body> تنظیم شده است:
body {
background-color: lightblue;
}
"red" (قرمز)"#ff0000""rgb(255,0,0)"برای مشاهده فهرست کامل مقادیر رنگی قابل استفاده، به فصل مربوط به رنگ‌ها در CSS مراجعه کنید.
شما می‌توانید رنگ پس‌زمینه را برای هر عنصر HTML تنظیم کنید.
در مثال زیر، عناصر <h1>، <p> و <div> هرکدام رنگ پس‌زمینه متفاوتی دارند:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
ویژگی opacity میزان شفافیت یک عنصر را مشخص می‌کند. مقدار این ویژگی عددی بین 0.0 تا 1.0 است. هرچه مقدار کمتر باشد، عنصر شفاف‌تر خواهد بود:
opacity: 1 → کاملاً ماتopacity: 0.6 → ۶۰٪ ماتopacity: 0.3 → ۳۰٪ ماتopacity: 0.1 → بسیار شفافdiv {
background-color: green;
opacity: 0.3;
}
نکته: هنگام استفاده از ویژگیopacityبرای ایجاد شفافیت در پس‌زمینه یک عنصر، تمام عناصر فرزند نیز همین میزان شفافیت را به ارث می‌برند. این موضوع ممکن است باعث شود متن داخل عنصر به‌سختی قابل خواندن باشد.
اگر نمی‌خواهید شفافیت به عناصر فرزند اعمال شود، می‌توانید از مقادیر رنگی RGBA استفاده کنید. در این روش، فقط رنگ پس‌زمینه شفاف می‌شود و متن داخل عنصر بدون تغییر باقی می‌ماند.
میزان شفافیت در RGBA نیز به‌صورت درصدی قابل تنظیم است:
rgba(..., 1)rgba(..., 0.6)rgba(..., 0.3)rgba(..., 0.1)در فصل مربوط به رنگ‌ها در CSS یاد گرفتید که می‌توان از RGB برای تعیین رنگ استفاده کرد. علاوه بر آن، می‌توان از RGBA استفاده کرد که شامل یک کانال آلفا برای تعیین میزان شفافیت رنگ است.
فرمت نوشتاری مقدار رنگ RGBA به‌صورت زیر است:
rgba(red, green, blue, alpha)پارامتر alpha عددی بین 0.0 (کاملاً شفاف) تا 1.0 (کاملاً مات) است.
💡 نکته: در فصل رنگ‌ها در CSS، اطلاعات بیشتری درباره رنگ‌های RGBA خواهید آموخت.
div {
background: rgba(0, 128, 0, 0.3); /* پس‌زمینه سبز با ۳۰٪ شفافیت */
}
background-color در CSS| ویژگی | توضیح |
|---|---|
background-color | رنگ پس‌زمینه یک عنصر را تنظیم می‌کند |
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: courses