Mga Katangian ng CSS na Kaugnay sa Background

Articles

Ipinaliliwanag ng artikulong ito ang mga katangian ng CSS na kaugnay sa background.

Matututuhan mo kung paano ilarawan ang mga katangian tulad ng setting ng background, posisyon, at pag-uulit.

YouTube Video

Paglikha ng HTML para sa preview

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Background at Dekorasyon

`background-color` na Katangian

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

Ang katangiang background-color ay ginagamit sa CSS upang itakda ang kulay ng background ng isang elemento. Maaari mong tukuyin ang kulay na ipinapakita sa likod ng teksto at ibang elemento, at maaaring magamit ang iba't ibang format upang tukuyin ang kulay. Ang paraan ng pagtukoy ng mga kulay ay katulad ng sa katangiang color, ngunit maaari mo ring tukuyin ang isang ganap na transparent na background gamit ang transparent.

Paliwanag:

red-example na klase ay nagtatakda ng kulay ng background bilang pula gamit ang isang keyword.
hex-example na klase ay nagtatakda ng kulay ng background gamit ang hexadecimal na code.
rgb-example na klase ay nagtatakda ng kulay ng background gamit ang RGB na format.
rgba-example na klase ay nagtatakda ng kulay ng background gamit ang RGBA na format, na may dagdag na transparency.
hsl-example na klase ay nagtatakda ng kulay ng background gamit ang HSL na format.
hsla-example na klase ay nagtatakda ng kulay ng background gamit ang HSLA na format, na may dagdag na transparency.
transparent-example na klase ay nagtatakda ng background na maging transparent.

`background-image` na Katangian

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

Ang katangiang background-image ay ginagamit upang magtakda ng imahe bilang background ng isang elemento. Ang tinukoy na imahe ay ipinapakita bilang background ng elemento, at maaaring ayusin ang laki, posisyon, at paraan ng pag-uulit nito gamit ang iba pang kaugnay na katangian. Ipapaliwanag din natin ang mga kaugnay na katangian tulad ng background-size, background-position, at background-repeat sa ibang pagkakataon.

Paliwanag:

background-image-example na klase ay gumagamit ng property na background-image upang gawing image.jpg ang background. background-size: cover ay pinapalawak ang imahe upang matakpan ang buong elemento, at background-position: center ay inilalagay ang imahe sa gitna. Ang pag-uulit ay hindi pinapagana gamit ang background-repeat: no-repeat.
Ang klase na background-image-gradient ay gumagamit ng linear-gradient() upang magtakda ng gradient sa background mula pula hanggang asul. Ang gradient ay ipinakikita mula kaliwa hanggang kanan.

Mga Uri ng Halagang Maaaring Tukuyin

Ang property na background-image ay maaaring magkaroon ng mga sumusunod na halaga.

url(): Itinatakda ang URL ng background na imahe. Isama ang file ng imahe sa loob ng url(). (ex.url('image.jpg'))
wala: Nagsasaad na huwag magtakda ng background na imahe. Ito ang default na halaga.
Gradients: Posible rin na itakda ang gradients bilang background na imahe gamit ang mga tampok ng CSS gradient. (ex.linear-gradient(), radial-gradient())

Mahahalagang Punto ng Ari-arian na `background-image`

Laki ng Imahe at Posisyon: Ang laki at posisyon ng mga background na imahe ay maaaring maingat na makontrol gamit ang ibang mga katangian, na nagpapahintulot ng mga pagsasaayos sa disenyo. Halimbawa, ang pagtukoy ng background-size: cover ay ini-uunat ang imahe upang matakpan ang buong lugar, inaalis ang anumang clipping.
Paggamit ng Gradient: Sa halip na isang larawan, maaari mong gamitin ang gradient bilang background, na nagbibigay ng dinamikong elemento sa disenyo.

Ari-arian na `background-position`

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

Ang ari-arian na background-position ay ginagamit upang tukuyin ang posisyon ng background na imahe sa loob ng isang elemento. Sa pamamagitan ng pagkontrol kung saan lilitaw ang background na imahe sa loob ng elemento, maaari kang lumikha ng mga layout na akma sa iyong disenyo. Ang default ay 0% 0%, inilalagay ang imahe sa itaas na kaliwang sulok.

Paliwanag:

top-left-example na klase ay nagtatakda ng posisyon ng imahe bilang top left, inilalagay ito sa kaliwang itaas na sulok.
center-example na klase ay inilalagay ang imahe sa gitna gamit ang center na attribute.
bottom-right-example na klase ay nagtatakda ng posisyon ng imahe bilang bottom right, inilalagay ito sa kanang ibabang sulok.

Mga Uri ng Halagang Maaaring Tukuyin

Ang property na background-position ay maaaring tumanggap ng mga sumusunod na uri ng halaga.

Mga Keyword: Maaari mong tukuyin ang left, right, top, bottom, center.
- Ang pagtukoy ng center ay maglalagay ng background na imahe sa gitna ng elemento.
- Ang pagtukoy ng right ay maglalagay ng background na imahe sa kanang bahagi.
- Ang pagtukoy ng top left ay maglalagay ng background na imahe sa itaas na kaliwang sulok.
- Ang pagtukoy sa bottom right ay ilalagay ang larawan sa background sa ibabang kanang sulok.
Haba o porsyento: Maaari mong tukuyin ang mga halaga tulad ng 10px 20px, 50% 50%.
- Ang pagtukoy sa 10px 20px ay maglalagay ng larawan sa background na 10px mula sa kaliwa at 20px mula sa itaas.
- Ang pagtukoy sa 50% 50% ay magpupwesto ng larawan sa background sa gitna nang pahalang at patayo.
calc() na function: Nagbibigay-daan sa mas tumpak na paglalagay gamit ang mga kalkulasyon ng CSS.

Ang property na `background-size`

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

Ang property na background-size ay ginagamit upang tukuyin ang sukat ng larawan sa background para sa isang elemento. Sa pamamagitan ng property na ito, maaring isaayos kung paano ipapakita ang larawan sa background, kung pupunuin nito ang buong elemento o pananatilihin ang orihinal na laki nito, upang bumagay sa disenyo. Ang default na halaga ay auto, na napananatili ang orihinal na laki ng larawan sa background.

Paliwanag:

cover-example na klase ay nagtatakda ng cover. Ang imahe ay palalakihin upang takpan ang buong elemento, ngunit maaaring matapyasan ang ilang bahagi.
contain-example na klase ay nagtatakda ng contain. Ang imahe ay iaangkop upang magkasya sa loob ng elemento, ngunit maaaring lumitaw ang ilang blangkong espasyo.
fixed-size-example na klase ay nagtatakda ng sukat para sa background na larawan, ipinapako ang lapad at taas sa 100px.

Mga Uri ng Halagang Maaaring Tukuyin

Ang property na background-size ay maaaring bigyan ng mga sumusunod na uri ng halaga.

Mga Keyword
- auto: Napananatili ang default na sukat ng imahe (ang lapad at taas ay awtomatikong tinutukoy).
- cover: Inaayos ang sukat ng larawan sa background upang ganap na matakpan ang elemento. Pupunan nito ang buong elemento, ngunit maaaring matapyasan ang ilang bahagi ng imahe.
- contain: Inaangkop ang imahe upang magkasya sa loob ng elemento, ngunit hindi natatakpan ang buong elemento. Napananatili ang aspect ratio ng imahe.
Numerikal na mga halaga (px, %, em, atbp.)
- Lapad at Taas: Tukuyin nang hayagan ang lapad at taas. Kung isang halaga lamang ang tinukoy, ito ay inilalapat sa lapad, at ang taas ay awtomatikong ina-adjust.
- Porsyento: Tukuyin ang sukat ng larawan sa background bilang porsyento ng sukat ng elemento. Halimbawa, ang 50% 50% ay nagtatakda ng imahe sa kalahati ng lapad at taas ng elemento.

Ari-aaring `background-repeat`

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

Ang ari-aaring background-repeat ay ginagamit upang kontrolin kung paano inuulit ang background na imahe ng isang elemento. Sa default na setting, inuulit ang background na imahe nang pahalang at patayo sa loob ng elemento, ngunit maaari mong ipasadya ang pag-uulit gamit ang ari-aaring ito.

Paliwanag:

repeat-example na klase ay ipinapakita ang imahe na inuulit sa parehong patayo at pahalang na direksyon.
repeat-x-example na klase ay inuulit ang imahe sa pahalang na direksyon lamang.
no-repeat-example na klase ay ipinapakita ang imahe nang isang beses lamang nang hindi inuulit.
space-example na klase ay inaayos ang background na imahe nang pantay-pantay, na may pantay na distansya sa pagitan ng mga ito.
round-example na klase ay awtomatikong binabago ang laki ng background na imahe upang ulitin at punan ang buong elemento.

Mga halagang maaaring tukuyin

Ang property na background-repeat ay maaaring bigyan ng mga sumusunod na uri ng halaga.

repeat: Inuulit ang background na imahe sa X-axis (pahalang) at Y-axis (patayo). Ito ang default na halaga.
repeat-x: Inuulit ang background na imahe sa X-axis (pahalang) lamang.
repeat-y: Inuulit ang background na imahe sa Y-axis (patayo) lamang.
no-repeat: Ang background na imahe ay hindi inuulit at ipinapakita nang isang beses lamang.
space: Inuulit ang background na imahe sa pantay na agwat, na may pantay na agwat sa pagitan.
round: Inuulit ang background na imahe, ngunit inaayos ang laki upang mapunan ang buong elemento. Maaaring baguhin ang laki ng imahe.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga katangian ng CSS na nauugnay sa modelong kahon Mga ari-arian ng CSS na may kinalaman sa dekorasyon ng box model

Mga Katangian ng CSS na Kaugnay sa Background

YouTube Video

Paglikha ng HTML para sa preview

Background at Dekorasyon

background-color na Katangian

Paliwanag:

background-image na Katangian

Paliwanag:

Mga Uri ng Halagang Maaaring Tukuyin

Mahahalagang Punto ng Ari-arian na background-image

Ari-arian na background-position

Paliwanag:

Mga Uri ng Halagang Maaaring Tukuyin

Ang property na background-size

Paliwanag:

Mga Uri ng Halagang Maaaring Tukuyin

Ari-aaring background-repeat

Paliwanag:

Mga halagang maaaring tukuyin

YouTube Video

`background-color` na Katangian

`background-image` na Katangian

Mahahalagang Punto ng Ari-arian na `background-image`

Ari-arian na `background-position`

Ang property na `background-size`

Ari-aaring `background-repeat`