---
title: CSS Дэвсгэр
description: "> CSS арын шинж чанаруудыг элементүүдийн арын эффект нэмэхэд ашигладаг. - `background-color` - `background-image` - `background-repeat` - `background-attachment` - `background-position` - `background` ## CSS Арын өнгө `background-color` нь элементийн арын өнгийг тодорхойлдог. Хуудасны арын өнгийг дараах байдлаар тохируулаж болно. `body…"
url: "https://apprentice.mn/docs/css-backgrounds/"
updated: "2021-07-23"
category: CSS
---

# CSS Дэвсгэр

> CSS арын шинж чанаруудыг элементүүдийн арын эффект нэмэхэд ашигладаг.

- `background-color`
- `background-image`
- `background-repeat`
- `background-attachment`
- `background-position`
- `background`

## CSS Арын өнгө

`background-color` нь элементийн арын өнгийг тодорхойлдог.

Хуудасны арын өнгийг дараах байдлаар тохируулаж болно.

      `body {
  background-color: lightblue;
}`

CSS-ийн тусламжтайгаар өнгийг дараахь байдлаар тодорхойлдог.

- “улаан” гэх мэт өнгөний нэр
- “# ff0000” шиг HEX утга
- “rgb (255,0,0)” шиг RGB утга

## Бусад элементүүд

Та ямар ч HTML элементийн арын өнгийг тохируулж болно

### Жишээ

Энд <h1>, <p>, <div> элементүүд өөр өөр арын өнгөтэй болно:

     `h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}`

## Тунгалаг биш /

## Тунгалагбайдал

`opacity` property нь элементийн тунгалаг / тунгалаг  биш байдлыг тодорхойлдог. Энэ нь 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

Та RGB-г өнгөний утга болгон ашиглаж болохыг манай CSS Colors бүлгээс мэдэж авлаа. RGB-ээс гадна та өнгөт тунгалаг байдлыг тодорхойлдог альфа суваг (RGBA) бүхий RGB өнгөний утгыг ашиглаж болно.

RGBA өнгөний утгыг дараах байдлаар зааж өгсөн болно: rgba (улаан, ногоон, цэнхэр, альфа). Альфа параметр нь 0.0 (бүрэн тунгалаг) ба 1.0 (бүрэн тунгалаг бус) хоорондох тоо юм.

     `div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}`               [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-backgrounds%2F&linkname=CSS%20%D0%94%D1%8D%D0%B2%D1%81%D0%B3%D1%8D%D1%80](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-backgrounds%2F&linkname=CSS%20%D0%94%D1%8D%D0%B2%D1%81%D0%B3%D1%8D%D1%80)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-backgrounds%2F&linkname=CSS%20%D0%94%D1%8D%D0%B2%D1%81%D0%B3%D1%8D%D1%80](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-backgrounds%2F&linkname=CSS%20%D0%94%D1%8D%D0%B2%D1%81%D0%B3%D1%8D%D1%80)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-backgrounds%2F&linkname=CSS%20%D0%94%D1%8D%D0%B2%D1%81%D0%B3%D1%8D%D1%80](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-backgrounds%2F&linkname=CSS%20%D0%94%D1%8D%D0%B2%D1%81%D0%B3%D1%8D%D1%80)[https://www.addtoany.com/share](https://www.addtoany.com/share)