آموزش CSS | قسمت هفتم "تصویر پس زمینه در CSS"
آموزش CSS : با سلام خدمت تمامی کاربران کلاس برتر در این قسمت آموزشی CSS قصد داریم به آموزش نحوه استفاده از تصاویر در پس زمینه صفحه وب بپردازیم ؛ ما رو تا آخر این مطلب همراهی کنید .
از پراپرتی بکگراند CSS برای تعریف جلوه های پس زمینه برای عناصر صفحه وب ما استفاده میشود استفاده می شود.
در این فصل از آموزش CSS ، با خصوصیات پس زمینه CSS زیر ، آشنا خواهید شد :
- رنگ پس زمینه
- تصویر پس زمینه
- تکرار پس زمینه
- پیوست پس زمینه
- موقعیت پس زمینه
رنگ پس زمینه CSS
ویژگی background-color رنگ پس زمینه یک عنصر را در صفحه وب مشخص می کند .
مثال :
رنگ پس زمینه یک صفحه به این صورت تنظیم می شود :
body {
background-color: lightblue;
}در CSS ، یک رنگ اغلب توسط مقادیر زیر تغریف می شود :
- یک نام رنگ معتبر - مانند "قرمز"
- یک مقدار HEX - مانند "ff0000#"
- مقدار RGB - مانند "(255،0،0)rgb"
برای آشناییت بیشتر با مقادیر انتخاب رنگ در CSS میتوانید به آموزش "اضافه کردن رنگ به CSS" مراجعه کنید .
دیگر عناصر
می توانید رنگ پس زمینه را برای هر عنصر HTML تنظیم کنید :
مثال :
در اینجا ، عناصر <h1> ، <p> و <div> دارای رنگ زمینه های مختلف هستند :
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
تیرگی و شفافیت ( Opacity / Transparency )
ویژگی 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 استفاده کنید. مثال زیر میزان کدری را فقط برای رنگ پس زمینه و نه متن ، تنظیم می کند :
100% opacity
60% opacity
30% opacity
10% opacity
مثال :
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}سعی ما در این این که با بالا بردن سطح دانش برنامه نویسی شما ، کمکی باشیم تا بتوانید به اهداف خود برسید ؛ خوشحال میشیم اگر نظر یا انتقادی دارید در زیر این پست در بخش نظرات با ما در نیان بگذارید .
شاد و سلامت باشید