Ciri-ciri CSS berkaitan dengan latar belakang

Articles

Artikel ini menerangkan ciri-ciri CSS berkaitan dengan latar belakang.

Anda boleh belajar cara menerangkan ciri-ciri seperti tetapan latar belakang, kedudukan, dan pengulangan.

YouTube Video

Mencipta HTML untuk pratonton

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>

Latar belakang dan Hiasan

Ciri `background-color`

 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}

Ciri background-color digunakan dalam CSS untuk menetapkan warna latar belakang sebuah elemen. Anda boleh menetapkan warna yang dipaparkan di belakang teks dan elemen lain, dan warna boleh ditentukan dalam pelbagai format. Kaedah penetapan warna adalah serupa dengan ciri color, tetapi anda juga boleh menetapkan latar belakang yang sepenuhnya lutsinar menggunakan transparent.

Penjelasan:

red-example kelas menetapkan warna latar belakang sebagai merah menggunakan kata kunci.
hex-example kelas menetapkan warna latar belakang menggunakan kod heksadesimal.
rgb-example kelas menetapkan warna latar belakang menggunakan format RGB.
rgba-example kelas menetapkan warna latar belakang menggunakan format RGBA, menambahkan ketelusan.
hsl-example kelas menetapkan warna latar belakang menggunakan format HSL.
hsla-example kelas menetapkan warna latar belakang menggunakan format HSLA, menambahkan ketelusan.
transparent-example kelas menetapkan latar belakang menjadi lutsinar.

Ciri `background-image`

 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}

Ciri background-image digunakan untuk menetapkan gambar sebagai latar belakang sebuah elemen. Gambar yang ditetapkan akan dipaparkan sebagai latar belakang elemen, dan saiznya, kedudukannya, serta kaedah pengulangan dapat dilaraskan dengan ciri berkaitan yang lain. Kami juga akan menerangkan ciri berkaitan seperti background-size, background-position, dan background-repeat kemudian.

Penjelasan:

background-image-example kelas menggunakan sifat background-image untuk menetapkan image.jpg sebagai latar belakang. background-size: cover menjadikan imej meliputi keseluruhan elemen, dan background-position: center memusatkan imej. Pengulangan dimatikan dengan background-repeat: no-repeat.
Kelas background-image-gradient menggunakan linear-gradient() untuk menetapkan kecerunan latar belakang dari merah ke biru. Kecerunan dipaparkan dari kiri ke kanan.

Jenis Nilai Yang Boleh Ditentukan

Harta background-image boleh mengambil nilai berikut.

url(): Menentukan URL imej latar belakang. Masukkan fail imej dalam url(). (ex.url('image.jpg'))
none: Menentukan untuk tidak menetapkan imej latar belakang. Ini adalah nilai lalai.
Gradien: Ia juga boleh menetapkan gradien sebagai imej latar belakang menggunakan ciri gradien CSS. (ex.linear-gradient(), radial-gradient())

Titik Penting Harta `background-image`

Saiz dan kedudukan imej: Saiz dan kedudukan imej latar belakang boleh dikawal secara terperinci dengan sifat lain, membolehkan pelarasan reka bentuk. Sebagai contoh, menentukan background-size: cover meregangkan imej untuk meliputi keseluruhan kawasan, menghapuskan sebarang pemotongan.
Menggunakan Gradasi: Daripada menggunakan gambar, anda boleh menggunakan gradasi sebagai latar belakang, menambahkan elemen dinamik pada reka bentuk.

Harta `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}

Harta background-position digunakan untuk menentukan kedudukan imej latar belakang dalam elemen. Dengan mengawal tempat imej latar belakang muncul dalam elemen, anda boleh mencipta susun atur yang sepadan dengan reka bentuk anda. Terbina dalam ialah 0% 0%, meletakkan imej di bahagian atas kiri.

Penjelasan:

top-left-example kelas menetapkan posisi imej sebagai atas kiri, meletakkan imej di sudut atas kiri.
center-example kelas meletakkan imej di tengah menggunakan atribut center.
bottom-right-example kelas menetapkan posisi imej sebagai bawah kanan, meletakkan imej di sudut bawah kanan.

Jenis Nilai Yang Boleh Ditentukan

Harta background-position boleh mengambil jenis nilai berikut.

Kata Kunci: Anda boleh menentukan left, right, top, bottom, center.
- Menentukan center akan meletakkan imej latar belakang di tengah elemen.
- Menentukan right akan meletakkan imej latar belakang di bahagian kanan.
- Menentukan top left akan meletakkan imej latar belakang di sudut atas kiri.
- Menentukan bawah kanan akan meletakkan imej latar di sudut kanan bawah.
Panjang atau peratusan: Anda boleh menentukan nilai seperti 10px 20px, 50% 50%.
- Menentukan 10px 20px akan meletakkan imej latar 10px dari kiri dan 20px dari atas.
- Menentukan 50% 50% akan memusatkan imej latar secara mendatar dan menegak.
Fungsi calc(): Membolehkan kedudukan lebih tepat menggunakan pengiraan CSS.

Sifat `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}

Sifat background-size digunakan untuk menentukan saiz imej latar bagi elemen. Dengan menggunakan sifat ini, anda boleh menyesuaikan cara imej latar dipaparkan, sama ada ia memenuhi seluruh elemen atau mengekalkan saiz asalnya, untuk disesuaikan dengan reka bentuk. Nilai lalai adalah auto, yang mengekalkan saiz asal imej latar.

Penjelasan:

cover-example kelas menetapkan cover. Imej akan diperbesarkan untuk menutup seluruh elemen, tetapi bahagian tertentu mungkin dipotong.
contain-example kelas menetapkan contain. Imej akan disesuaikan untuk muat dalam elemen, tetapi ruang kosong mungkin muncul.
fixed-size-example kelas menetapkan saiz tetap untuk imej latar belakang, menetapkan lebar dan tinggi menjadi 100px setiap satu.

Jenis Nilai Yang Boleh Ditentukan

Sifat background-size boleh diberikan jenis nilai berikut.

Kata Kunci
- auto: Mengekalkan saiz lalai imej (lebar dan tinggi ditentukan secara automatik).
- cover: Menyesuaikan saiz imej latar untuk menutup sepenuhnya elemen. Ia akan memenuhi seluruh elemen, tetapi bahagian imej mungkin dipotong.
- contain: Menyesuaikan imej agar muat dalam elemen, tetapi tidak menutup seluruh elemen. Nisbah aspek imej dikekalkan.
Nilai berangka (px, %, em, dll.)
- Lebar dan Tinggi: Nyatakan lebar dan tinggi secara eksplisit. Jika hanya satu nilai dinyatakan, ia digunakan untuk lebar, dan tinggi disesuaikan secara automatik.
- Peratusan: Nyatakan saiz imej latar sebagai peratusan daripada saiz elemen. Sebagai contoh, 50% 50% menetapkan imej menjadi separuh lebar dan tinggi elemen.

Sifat `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}

Sifat background-repeat digunakan untuk mengawal bagaimana imej latar belakang sesuatu elemen diulang. Secara lalai, imej latar belakang diulang secara mendatar dan menegak dalam elemen, tetapi anda boleh menyesuaikan kelakuan ulangannya menggunakan sifat ini.

Penjelasan:

repeat-example kelas memaparkan imej diulang secara menegak dan melintang.
repeat-x-example kelas mengulang imej hanya secara mendatar.
no-repeat-example kelas memaparkan imej hanya sekali tanpa mengulanginya.
space-example kelas menyusun imej latar belakang secara sekata dengan jarak yang sama antara satu sama lain.
round-example kelas secara automatik mengubah saiz imej latar belakang untuk diulang dan memenuhi keseluruhan elemen.

Nilai yang boleh ditentukan

Sifat background-repeat boleh diberikan jenis nilai berikut.

repeat: Imej latar belakang diulang sepanjang paksi-X (mendatar) dan paksi-Y (menegak). Ini adalah nilai lalai.
repeat-x: Imej latar belakang diulang hanya sepanjang paksi-X (mendatar).
repeat-y: Imej latar belakang diulang hanya sepanjang paksi-Y (menegak).
no-repeat: Imej latar belakang tidak diulang dan dipaparkan hanya sekali.
space: Imej latar belakang diulang pada selang masa tetap, dengan jarak yang sama di antara.
round: Imej latar belakang diulang, tetapi saiz disesuaikan untuk mengisi keseluruhan elemen. Imej mungkin dilaraskan saiznya.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Sifat-sifat CSS berkaitan dengan model kotak Sifat CSS yang berkaitan dengan hiasan model kotak

Ciri-ciri CSS berkaitan dengan latar belakang

YouTube Video

Mencipta HTML untuk pratonton

Latar belakang dan Hiasan

Ciri background-color

Penjelasan:

Ciri background-image

Penjelasan:

Jenis Nilai Yang Boleh Ditentukan

Titik Penting Harta background-image

Harta background-position

Penjelasan:

Jenis Nilai Yang Boleh Ditentukan

Sifat background-size

Penjelasan:

Jenis Nilai Yang Boleh Ditentukan

Sifat background-repeat

Penjelasan:

Nilai yang boleh ditentukan

YouTube Video

Ciri `background-color`

Ciri `background-image`

Titik Penting Harta `background-image`

Harta `background-position`

Sifat `background-size`

Sifat `background-repeat`