خصوصیات پس‌زمینه در CSS برای افزودن افکت‌های پس‌زمینه به عناصر استفاده می‌شود. در این فصل‌ها، با خصوصیات زیر در CSS برای پس‌زمینه آشنا خواهید شد:
- background-color (رنگ پس‌زمینه)
- background-image (تصویر پس‌زمینه)
- background-repeat (تکرار پس‌زمینه)
- background-attachment (پیوست پس‌زمینه)
- background-position (موقعیت پس‌زمینه)
- background (شورت‌هند پس‌زمینه)
CSS - رنگ پس‌زمینه (Background Color)
خصوصیت background-color رنگ پس‌زمینه یک عنصر را مشخص می‌کند.
مثال: در اینجا، رنگ پس‌زمینه صفحه به این صورت تنظیم شده است:
body {
background-color: lightblue;
}رنگ‌ها در CSS به چند روش مختلف تعریف می‌شوند:
- با استفاده از یک نام رنگ معتبر مثل “red”
- با استفاده از مقدار HEX مانند “#ff0000”
- با استفاده از مقدار RGB مثل “rgb(255,0,0)”
برای مشاهده لیست کامل مقادیر رنگ در CSS، به بخش “مقادیر رنگ CSS” مراجعه کنید.
سایر عناصر
شما می‌توانید رنگ پس‌زمینه هر عنصر HTML را تنظیم کنید:
مثال: در اینجا، عناصر <h1>، <p> و <div> هر کدام رنگ پس‌زمینه متفاوتی دارند:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}شفافیت (Opacity)
خصوصیت opacity شفافیت یک عنصر را مشخص می‌کند. این مقدار می‌تواند بین 0.0 تا 1.0 باشد. هرچه مقدار کمتر باشد، شفافیت بیشتر است.
مثال:
div {
background-color: green;
opacity: 0.3;
}نکته: هنگامی که از خصوصیت opacity برای افزودن شفافیت به پس‌زمینه یک عنصر استفاده می‌کنید، تمام عناصر فرزند نیز همان شفافیت را به ارث می‌برند. این موضوع می‌تواند خواندن متن درون یک عنصر کاملاً شفاف را سخت کند.
شفافیت با استفاده از RGBA
اگر نمی‌خواهید که شفافیت به عناصر فرزند اعمال شود، می‌توانید از مقادیر رنگ RGBA استفاده کنید. در مثال زیر، شفافیت فقط برای رنگ پس‌زمینه و نه برای متن تنظیم شده است:
مثال:
div {
background: rgba(0, 128, 0, 0.3); /* پس‌زمینه سبز با 30% شفافیت */
}خصوصیت رنگ پس‌زمینه در CSS
| خصوصیت | توضیحات |
|---|
| background-color | تنظیم رنگ پس‌زمینه یک عنصر |
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام