فهرست مطالب برای مطالعه
آموزش تغییر پس زمینه عناصر با css
در سی اس اس در مورد کار با background یا پس زمینه چند ویژگی داریم که شامل موارد زیر هست:
- background-color - رنگی
- background-image - تصویری
- background-repeat - تکرار تصویر
- background-attachment
- background-position
background-color
خصوصیت background-color رنگ پس زمینه یک عنصر را مشخص می کند.
background-image
با استفاده از خصوصیت background-image میتوان یک عکس را به عنوان پس زمینه برای یک عنصر مشخص کرد.
همچنین برای دادن gradiant (گرادیانت) به عنصر از این خصوصیت استفاده میکنیم . برای این کار در قسمت value باید از کلمه کلیدی ، linear-gradiant (گرادیانت خطی) یا radial gradients (گرادیانت شعاعی) استفاده کرد.
gradient (گرادیانت) چیست؟
گرادیانت یعنی نمایش تغییر رنگ ، بین یک یا چند رنگ که یک طیف رنگی بین رنگ های اصلی به وجود می آید.
مثال linear-gradiant (گرادیانت خطی) :
background: linear-gradient(#e66465, #9198e5);
مثال radial gradients (گرادیانت شعاعی) :
background: radial-gradient(#e66465, #9198e5);
background-repeat
زمانی که عکس از container (عنصر نگهدارنده) به میزان قابل توجهی کوچک تر باشد ، به صورت پیش فرض عکس تکرار میشود تا container را پر کند.
background-attachment
ویژگی background-attachment ، نحوه رفتار تصویر پس زمینه نسبت به اسکرول صفحه را مشخص میکند.
background-attachment دارای سه مقدار از پیش تعریف شده برای مقدار دهی میباشد. که شامل :
scroll , fix , local
background-position
ویژگی background-position ، موقعیت پس زمینه را با توجه به عنصری که به ان ویژگی داده شده است, تعیین میکند.
مثال:
.container{
background-image: linear-gradient(to bottom left, #6474C0, #59E260);
background-size: 50px 50px;
background-repeat: no-repeat;
/* background-size: cover; */
background-position:center center;
width: 300px;
height: 300px;
border: 2px solid;
color: pink;
}
تشریح مثال :
در اینجا ما به یک عنصر div ویژگی background دادیم. که از این ویژگی ها ، ویژگی background -image است که با استفاده از مقدار گرادیانت ، یک پس زمینه در عنصر div ایجاد کرده ایم.ویژگی بعدی ، ویژگی background-size است که سایز پس زمینه را به 50px در 50px تبدیل کرده ایم.در ویژگی background-position ،موقعیت پس زمینه را نسبت به عنصر div مشخص کرده ایم.
