Articles
Giới thiệu về CSS
Thuộc tính CSS liên quan đến nền

Thuộc tính CSS liên quan đến nền

Bài viết này giải thích các thuộc tính CSS liên quan đến nền.

Bạn có thể học cách mô tả các thuộc tính như thiết lập nền, vị trí và lặp lại.

YouTube Video

Tạo HTML để xem trước

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>

Nền và Trang trí

Thuộc tính 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}

Thuộc tính background-color được sử dụng trong CSS để đặt màu nền của một phần tử. Bạn có thể chỉ định màu hiển thị phía sau văn bản và các phần tử khác, và màu sắc có thể được định nghĩa theo nhiều định dạng khác nhau. Cách chỉ định màu tương tự thuộc tính color, nhưng bạn cũng có thể chỉ định nền hoàn toàn trong suốt bằng cách sử dụng transparent.

Giải thích:

  • Lớp red-example chỉ định màu nền là màu đỏ bằng cách sử dụng từ khóa.
  • Lớp hex-example chỉ định màu nền bằng mã hexadecimal.
  • Lớp rgb-example chỉ định màu nền bằng định dạng RGB.
  • Lớp rgba-example chỉ định màu nền bằng định dạng RGBA, thêm tính năng trong suốt.
  • Lớp hsl-example chỉ định màu nền bằng định dạng HSL.
  • Lớp hsla-example chỉ định màu nền bằng định dạng HSLA, thêm tính năng trong suốt.
  • Lớp transparent-example đặt nền thành trong suốt.

Thuộc tính 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}

Thuộc tính background-image được sử dụng để đặt một hình ảnh làm nền cho một phần tử. Hình ảnh được chỉ định được hiển thị làm nền của phần tử, và kích thước, vị trí, cùng phương pháp lặp lại có thể được điều chỉnh bằng các thuộc tính liên quan khác. Chúng tôi cũng sẽ giải thích các thuộc tính liên quan như background-size, background-position, và background-repeat sau này.

Giải thích:

  • Lớp background-image-example sử dụng thuộc tính background-image để đặt image.jpg làm nền. background-size: cover làm hình ảnh bao phủ toàn bộ phần tử, và background-position: center căn giữa hình ảnh. Việc lặp lại bị tắt với background-repeat: no-repeat.

  • Lớp background-image-gradient sử dụng linear-gradient() để đặt gradient nền từ màu đỏ sang màu xanh. Gradient được hiển thị từ trái sang phải.

Các loại giá trị có thể được chỉ định

Thuộc tính background-image có thể nhận các giá trị sau.

  • url(): Chỉ định URL của hình ảnh nền. Bao gồm tệp hình ảnh trong url(). (ex.url('image.jpg'))
  • none: Chỉ định không đặt hình nền. Đây là giá trị mặc định.
  • Gradients: Cũng có thể thiết lập gradient làm hình ảnh nền bằng cách sử dụng các tính năng gradient của CSS. (ex.linear-gradient(), radial-gradient())

Các điểm chính của thuộc tính background-image

  • Kích thước và vị trí hình ảnh: Kích thước và vị trí của hình ảnh nền có thể được điều chỉnh chi tiết với các thuộc tính khác, cho phép điều chỉnh thiết kế. Ví dụ, chỉ định background-size: cover làm căng hình ảnh để bao phủ toàn bộ khu vực, loại bỏ bất kỳ hiện tượng cắt xén nào.

  • Sử dụng dải màu: Thay vì một hình ảnh, bạn có thể sử dụng dải màu làm nền, thêm yếu tố động cho thiết kế.

Thuộc tính 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}

Thuộc tính background-position được sử dụng để chỉ định vị trí của hình ảnh nền trong một phần tử. Bằng cách kiểm soát vị trí xuất hiện của hình ảnh nền trong phần tử, bạn có thể tạo ra các bố cục phù hợp với thiết kế của bạn. Mặc định là 0% 0%, đặt hình ảnh ở góc trên bên trái.

Giải thích:

  • Lớp top-left-example chỉ định vị trí hình ảnh là top left, đặt hình ảnh ở góc trên bên trái.
  • Lớp center-example đặt hình ảnh ở giữa bằng cách sử dụng thuộc tính center.
  • Lớp bottom-right-example chỉ định vị trí hình ảnh là bottom right, đặt hình ảnh ở góc dưới bên phải.

Các loại giá trị có thể được chỉ định

Thuộc tính background-position có thể nhận các loại giá trị sau.

  • Từ khóa: Bạn có thể chỉ định left, right, top, bottom, center.

    • Chỉ định center sẽ đặt hình ảnh nền ở trung tâm của phần tử.
    • Chỉ định right sẽ đặt hình ảnh nền ở phía bên phải.
    • Chỉ định top left sẽ đặt hình ảnh nền ở góc trên bên trái.
    • Chỉ định bottom right sẽ đặt hình nền ở góc dưới bên phải.

  • Độ dài hoặc phần trăm: Bạn có thể chỉ định các giá trị như 10px 20px, 50% 50%.

    • Chỉ định 10px 20px sẽ đặt hình nền cách bên trái 10px và cách trên cùng 20px.
    • Chỉ định 50% 50% sẽ căn giữa hình nền cả theo chiều ngang và chiều dọc.

  • Hàm calc(): Cho phép định vị chính xác hơn bằng cách sử dụng tính toán CSS.

Thuộc tính 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}

Thuộc tính background-size được sử dụng để chỉ định kích thước của hình nền cho một phần tử. Bằng cách sử dụng thuộc tính này, bạn có thể điều chỉnh cách hiển thị hình nền, liệu nó sẽ lấp đầy toàn bộ phần tử hay giữ nguyên kích thước gốc để phù hợp với thiết kế. Giá trị mặc định là auto, giữ nguyên kích thước gốc của hình nền.

Giải thích:

  • Lớp cover-example chỉ định cover. Hình ảnh sẽ được phóng to để bao phủ toàn bộ phần tử, nhưng một số phần có thể bị cắt.
  • Lớp contain-example chỉ định contain. Hình ảnh sẽ được điều chỉnh để vừa với phần tử, nhưng có thể xuất hiện một số khoảng trống.
  • Lớp fixed-size-example chỉ định kích thước cố định cho hình nền, đặt chiều rộng và chiều cao mỗi cái là 100px.

Các loại giá trị có thể được chỉ định

Thuộc tính background-size có thể được gán với các loại giá trị sau.

  • Từ khóa

    • auto: Giữ kích thước mặc định của hình ảnh (chiều rộng và chiều cao được tự động xác định).
    • cover: Điều chỉnh kích thước của hình nền để bao phủ toàn bộ phần tử. Nó sẽ lấp đầy toàn bộ phần tử, nhưng một số phần của hình ảnh có thể bị cắt.
    • contain: Điều chỉnh hình ảnh để vừa với phần tử, nhưng không bao phủ toàn bộ phần tử. Tỷ lệ khung hình của hình ảnh được giữ nguyên.

  • Các giá trị số (px, %, em, v.v.)

    • Chiều rộng và chiều cao: Chỉ định rõ ràng chiều rộng và chiều cao. Nếu chỉ một giá trị được chỉ định, nó sẽ áp dụng cho chiều rộng và chiều cao sẽ được điều chỉnh tự động.
    • Phần trăm: Chỉ định kích thước của hình nền dưới dạng phần trăm của kích thước phần tử. Ví dụ, 50% 50% đặt hình ảnh bằng một nửa chiều rộng và chiều cao của phần tử.

Thuộc tính 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}

Thuộc tính background-repeat được sử dụng để điều khiển cách lặp lại hình ảnh nền của một phần tử. Mặc định, hình ảnh nền sẽ lặp lại theo chiều ngang và chiều dọc trong phần tử, nhưng bạn có thể tùy chỉnh cách lặp lại bằng cách sử dụng thuộc tính này.

Giải thích:

  • Lớp repeat-example hiển thị hình ảnh lặp lại cả theo chiều dọc và chiều ngang.
  • Lớp repeat-x-example chỉ lặp lại hình ảnh theo chiều ngang.
  • Lớp no-repeat-example chỉ hiển thị hình ảnh một lần mà không lặp lại.
  • Lớp space-example sắp xếp các hình nền đều đặn với khoảng cách bằng nhau giữa chúng.
  • Lớp round-example tự động thay đổi kích thước hình nền để lặp lại và lấp đầy toàn bộ phần tử.

Các giá trị có thể được chỉ định

Thuộc tính background-repeat có thể được gán với các loại giá trị sau.

  • repeat: Hình ảnh nền được lặp lại theo cả trục X (ngang) và trục Y (dọc). Đây là giá trị mặc định.
  • repeat-x: Hình ảnh nền chỉ lặp lại theo trục X (ngang).
  • repeat-y: Hình ảnh nền chỉ lặp lại theo trục Y (dọc).
  • no-repeat: Hình ảnh nền không lặp lại và chỉ hiển thị một lần.
  • space: Hình ảnh nền được lặp lại tại các khoảng cách đều đặn, với khoảng cách bằng nhau giữa các hình.
  • round: Hình ảnh nền được lặp lại, nhưng kích thước được điều chỉnh để lấp đầy toàn bộ phần tử. Hình ảnh có thể được thay đổi kích thước.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến mô hình hộpCác thuộc tính CSS liên quan đến trang trí mô hình hộp