Làm cách nào để thêm hình nền trong CSS?

Question

Thuộc tính background-image trong CSS áp dụng một hình ảnh (e. g. PNG, SVG, JPG, GIF, WEBP) hoặc chuyển màu sang nền của một phần tử

Nội dung chính Show

Hình ảnh
Độ dốc
Đặt màu dự phòng
Nhiều hình nền
Cú pháp hình nền
Cách dừng lặp lại nền
Cách đặt vị trí nền
Cách thay đổi kích thước hình nền
Cách sử dụng thuộc tính tệp đính kèm nền
Độ dốc nền
Phần kết luận
Chúng tôi có thể tải lên một hình ảnh trong nền CSS không?
Làm cách nào để thêm hình nền trong CSS Visual Studio Code?
Làm cách nào để thêm hình ảnh vào CSS?

Có hai loại hình ảnh khác nhau mà bạn có thể đưa vào bằng CSS. hình ảnh thông thường và độ dốc

Hình ảnh

Sử dụng hình ảnh trên nền khá đơn giản

body {
  background: url(sweettexture.jpg);
}

Giá trị url() cho phép bạn cung cấp đường dẫn tệp đến bất kỳ hình ảnh nào và nó sẽ hiển thị dưới dạng nền cho phần tử đó

Bạn cũng có thể đặt URI dữ liệu cho url(). Trông như thế này

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Kỹ thuật này loại bỏ một yêu cầu HTTP, đây là một điều tốt. Tuy nhiên, có một số nhược điểm, vì vậy trước khi bạn bắt đầu thay thế tất cả các hình ảnh của mình, hãy đảm bảo rằng bạn đã xem xét tất cả các ưu và nhược điểm của URI dữ liệu

Bạn cũng có thể sử dụng background-image để chia nhỏ hình ảnh, đây là một phương pháp hữu ích khác để giảm yêu cầu HTTP

Độ dốc

Một tùy chọn khác khi sử dụng hình nền là yêu cầu trình duyệt tạo độ dốc. Đây là một ví dụ siêu đơn giản về gradient tuyến tính

body {
  background: linear-gradient(black, white);
}

Bạn cũng có thể sử dụng gradient xuyên tâm

body {
  background: radial-gradient(circle, black, white);
}

Về mặt kỹ thuật, độ dốc chỉ là một dạng khác của hình nền. Sự khác biệt là trình duyệt tạo hình ảnh cho bạn. Dưới đây là toàn bộ hướng dẫn về cách tạo và sử dụng chúng

Ví dụ trên chỉ sử dụng một dải màu, nhưng bạn cũng có thể xếp nhiều dải màu lên nhau. Có một số mẫu khá tuyệt vời mà bạn có thể tạo bằng kỹ thuật này

Đặt màu dự phòng

Nếu hình nền không tải được hoặc nền chuyển màu của bạn được xem trên trình duyệt không hỗ trợ chuyển màu, thì trình duyệt sẽ tìm màu nền làm màu dự phòng. Bạn có thể chỉ định màu dự phòng của mình như thế này

body {
  background: url(sweettexture.jpg) blue;
}

Nhiều hình nền

Bạn có thể sử dụng nhiều hình ảnh hoặc hỗn hợp hình ảnh và chuyển màu cho nền của mình. Nhiều hình nền hiện được hỗ trợ tốt (tất cả các trình duyệt hiện đại và IE9+ cho hình ảnh đồ họa, IE10+ cho độ dốc)

Khi bạn đang sử dụng nhiều hình nền, hãy lưu ý rằng có một thứ tự xếp chồng hơi phản trực giác. Liệt kê hình ảnh nên ở phía trước và hình ảnh nên ở phía sau, như thế này

body {
  background: url(logo.png), url(background-pattern.png);
}

Khi bạn đang sử dụng nhiều hình nền, bạn sẽ thường cần đặt nhiều giá trị hơn cho nền để mọi thứ ở đúng vị trí. Nếu bạn muốn sử dụng tốc ký

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

1, bạn có thể đặt các giá trị cho từng hình ảnh riêng lẻ. Tốc ký của bạn sẽ giống như thế này (chú ý dấu phẩy ngăn cách hình ảnh đầu tiên và các giá trị của nó với hình ảnh thứ hai và các giá trị của nó)

body {
  background:
    url(logo.png) bottom center no-repeat,
    url(background-pattern.png) repeat;
}

Không có giới hạn về số lượng hình nền bạn có thể đặt và bạn có thể làm những điều thú vị như tạo hiệu ứng cho hình nền của mình. Có một ví dụ điển hình về nhiều hình nền có hoạt ảnh trên blog của David Walsh

Thuộc tính background-image trong CSS được sử dụng để đặt một hình ảnh làm nền của một phần tử. Sử dụng thuộc tính CSS này, chúng ta có thể đặt một hoặc nhiều hình nền cho một phần tử

Theo mặc định, hình ảnh được đặt ở góc trên cùng bên trái của một phần tử và được lặp lại theo cả chiều ngang cũng như chiều dọc. Nên chọn hình nền theo màu chữ. Sự kết hợp không tốt giữa văn bản và hình nền có thể là nguyên nhân khiến trang web được thiết kế kém và không thể đọc được

Giá trị url() của thuộc tính này cho phép chúng tôi bao gồm đường dẫn tệp tới bất kỳ hình ảnh nào. Nó sẽ hiển thị nền của phần tử. Chúng ta có thể sử dụng nhiều hình ảnh hoặc hỗn hợp gradient và hình ảnh cho nền. Nếu hình nền không tải được hoặc nếu chúng ta đang sử dụng gradient, nhưng chúng không được hỗ trợ trên trình duyệt tương ứng thì chúng ta có thể sử dụng giá trị dự phòng (giá trị được sử dụng thay thế) làm màu nền của phần tử

cú pháp

giá trị

url(). Đó là URL của hình ảnh. Chúng tôi có thể phân tách các URL bằng dấu phẩy nếu chúng tôi muốn chỉ định nhiều hơn một hình ảnh

Những gì người dùng nhìn thấy trên một trang web sẽ ảnh hưởng đến trải nghiệm người dùng của họ tốt như thế nào. Nó cũng sẽ ảnh hưởng đến mức độ dễ dàng mà họ có thể sử dụng toàn bộ trang web nói chung

Thêm hình ảnh vào nền của một số phần nhất định của trang web thường hấp dẫn và thú vị hơn là chỉ thay đổi màu nền

Các trình duyệt hiện đại hỗ trợ nhiều loại tệp hình ảnh như

section {
    background-repeat: repeat;
        }

3,

section {
    background-repeat: repeat;
        }

4,

section {
    background-repeat: repeat;
        }

5 và

section {
    background-repeat: repeat;
        }

6

Bài viết này giải thích cách thêm hình ảnh vào mã HTML của bạn và cách tinh chỉnh chúng để trông đẹp hơn

Cú pháp hình nền

Bước đầu tiên là đảm bảo bạn tạo một thư mục nội dung (thư mục) để chứa các hình ảnh bạn muốn sử dụng trong dự án của mình

Ví dụ: chúng tôi có thể tạo một thư mục

section {
    background-repeat: repeat;
        }

7 trong dự án mà chúng tôi đang thực hiện và thêm một hình ảnh có tên là

section {
    background-repeat: repeat;
        }

8 mà chúng tôi muốn sử dụng

Thuộc tính CSS

section {
    background-repeat: repeat;
        }

9 cho phép bạn đặt hình ảnh phía sau bất kỳ thành phần HTML nào bạn muốn

Đây có thể là toàn bộ trang (bằng cách sử dụng bộ chọn

section {
    background-repeat: no-repeat;
        }

0 trong CSS nhắm mục tiêu phần tử

section {
    background-repeat: no-repeat;
        }

1 trong HTML của chúng tôi) hoặc chỉ một phần cụ thể độc lập của trang, chẳng hạn như phần tử

section {
    background-repeat: no-repeat;
        }

2 như trong ví dụ bên dưới

Để thêm

section {
    background-repeat: repeat;
        }

9 vào thẻ phần trong tệp

section {
    background-repeat: no-repeat;
        }

4 của bạn, hãy viết đoạn mã sau

section {
     background-image: url("images/sunset.png");
        }

Hãy thảo luận về những gì đang xảy ra ở đây một cách chi tiết

```
section {
    background-repeat: no-repeat;
        }
```
2 chỉ định thẻ bạn muốn thêm hình ảnh vào
```
section {
    background-repeat: no-repeat;
        }
```
6 được sử dụng để cho CSS biết vị trí của hình ảnh của chúng ta
Bên trong dấu ngoặc đơn,
```
section {
    background-repeat: no-repeat;
        }
```
7 là đường dẫn đến hình ảnh. Điều này cho phép trình duyệt biết URL nào cần kéo
Đường dẫn trong ví dụ này được gọi là đường dẫn
```
section {
    background-repeat: no-repeat;
        }
```
8 có nghĩa là nó là tệp cục bộ, liên quan đến dự án của chúng tôi và thư mục làm việc hiện tại của chúng tôi và không phải là địa chỉ web. Để thêm hình ảnh, chúng tôi cũng có thể sử dụng đường dẫn
```
section {
    background-repeat: no-repeat;
        }
```
9, đây là địa chỉ web đầy đủ và bắt đầu bằng URL tên miền (
```
section {
    background-repeat: repeat-y;
        }
```
0)
Sử dụng dấu ngoặc kép là một thói quen tốt nhưng chúng ta có thể bỏ qua chúng, vì vậy
```
section {
    background-repeat: repeat-y;
        }
```
1 cũng hoạt động như vậy
Đừng quên dấu chấm phẩy

Cách dừng lặp lại nền

Khi bạn áp dụng hình nền cho một thành phần, theo mặc định, nó sẽ tự lặp lại

Nếu hình ảnh nhỏ hơn thẻ mà nó là nền, nó sẽ lặp lại để điền vào thẻ

Làm thế nào để chúng ta ngăn chặn điều này xảy ra?

Thuộc tính

section {
    background-repeat: repeat-y;
        }

2 nhận 4 giá trị và chúng tôi có thể thay đổi hướng mà hình ảnh lặp lại hoặc ngăn hình ảnh tự lặp lại cùng nhau

________số 8_______

Đây là giá trị mặc định nếu chúng ta không gán giá trị cho thuộc tính

section {
    background-repeat: repeat-y;
        }

2. Trong trường hợp này, hình ảnh được lặp lại theo cả chiều ngang và chiều dọc theo cả hướng x và hướng y tương ứng cho đến khi nó lấp đầy không gian

section {
    background-repeat: no-repeat;
        }

Làm cách nào để thêm hình nền trong CSS?

Giá trị

section {
    background-repeat: repeat-y;
        }

4 ngăn hình ảnh tự lặp lại từ mọi hướng. Hình ảnh chỉ được hiển thị một lần

section {
    background-repeat: repeat-y;
        }

Giá trị này chỉ lặp lại hình ảnh theo chiều ngang trên trang. Hình ảnh được lặp lại trên trang, trong

section {
    background-repeat: repeat-y;
        }

5.

section {
    background-repeat: repeat-y;
        }

5 trong môn toán là từ trái sang phải

section {
    background-repeat: repeat-y;
        }

Giá trị này chỉ lặp lại hình ảnh theo chiều dọc trên trang. Hình ảnh được lặp lại trên trang, trong

section {
    background-repeat: repeat-y;
        }

7.

section {
    background-repeat: repeat-y;
        }

7 trong môn toán là từ trên xuống dưới

Cách đặt vị trí nền

Sau khi thêm hình nền và ngăn nó lặp lại, chúng tôi có thể kiểm soát thêm hình thức của nó trong nền của thẻ bằng cách cải thiện vị trí của nó

Chúng ta sẽ sử dụng thuộc tính

section {
    background-repeat: repeat-y;
        }

9 để làm điều này

Bộ chọn nhận hai giá trị. Cái đầu tiên dành cho vị trí nằm ngang hoặc hướng x (khoảng cách trên thẻ). Cái thứ hai dành cho vị trí thẳng đứng hoặc hướng y (thẻ bao xa)

Các giá trị có thể là đơn vị, như một cặp pixel

section {
    background-position: 20px 30px;
        }

Điều này sẽ di chuyển hình ảnh theo chiều ngang 20px và 30px xuống dưới thẻ chứa

Thay vì pixel, chúng ta có thể sử dụng một bộ từ khóa như phải, trái, trên, dưới hoặc giữa để đặt hình ảnh ở bên phải, trái, trên, dưới hoặc giữa của thẻ

section {
    background-position: right center;
        }

Điều này đặt hình ảnh ở phía bên phải của trung tâm của thẻ

Nếu chúng ta muốn căn giữa nó theo cả chiều ngang và chiều dọc, chúng ta sẽ làm như sau

section {
    background-position: center center;
        }

Để định vị một hình ảnh với chi tiết tốt hơn, điều đáng nói là chúng ta có thể sử dụng tỷ lệ phần trăm

section {
    background-position: 20% 40%;
        }

Điều này định vị hình ảnh 20% trên thẻ và 40% bên dưới thẻ

Cho đến nay, chúng ta đã thấy các giá trị được sử dụng kết hợp, nhưng chúng ta cũng có thể chỉ định một giá trị như

section {
    background-repeat: repeat-y;
        }

0 hoặc

section {
    background-repeat: repeat-y;
        }

1 hoặc

section {
    background-repeat: repeat-y;
        }

2, áp dụng giá trị đó cho cả hai hướng

Cách thay đổi kích thước hình nền

Để kiểm soát kích thước của hình nền, chúng ta có thể sử dụng thuộc tính kích thước nền

Một lần nữa, giống như các thuộc tính trước đó đã đề cập, nó nhận hai giá trị. Một cho kích thước ngang (x) và một cho kích thước dọc (y)

Chúng ta có thể sử dụng pixel, như vậy

section {
    background-size: 20px 40px;
    /* sizes the image 20px across and 40px down the page */
        }

Nếu chúng tôi không biết chính xác chiều rộng của vùng chứa mà chúng tôi đang lưu trữ hình ảnh trong đó, thì có một tập hợp các giá trị cụ thể mà chúng tôi có thể cung cấp cho thuộc tính

```
section {
    background-repeat: repeat-y;
        }
```
3 thay đổi kích thước hình nền để nó bao phủ toàn bộ không gian nền của thẻ bất kể chiều rộng của thẻ. Nếu hình ảnh quá lớn và có tỷ lệ lớn hơn so với thẻ nằm trong đó, điều này có nghĩa là hình ảnh sẽ bị kéo dài và do đó bị cắt ở các cạnh của nó
```
section {
    background-repeat: repeat-y;
        }
```
4 chứa hình ảnh, đúng như tên gọi. Nó sẽ đảm bảo toàn bộ hình ảnh được hiển thị trong nền mà không cắt bỏ bất kỳ hình ảnh nào. Nếu hình ảnh nhỏ hơn nhiều so với thẻ, sẽ có khoảng trống bị bỏ trống, điều này sẽ khiến nó lặp lại để lấp đầy, vì vậy chúng ta có thể sử dụng quy tắc
```
section {
    background-repeat: repeat-y;
        }
```
5 mà chúng tôi đã đề cập trước đó

Quy tắc

section {
    background-repeat: repeat-y;
        }

6 trong trường hợp này sẽ cắt các phần của hình ảnh

Khi chúng tôi thay đổi nó thành

section {
    background-repeat: repeat-y;
        }

7, chúng tôi thấy rằng hình ảnh co lại để phù hợp với thẻ phần

Cách sử dụng thuộc tính tệp đính kèm nền

Với thuộc tính

section {
    background-repeat: repeat-y;
        }

8, chúng ta có thể kiểm soát vị trí hình nền được đính kèm, nghĩa là hình ảnh có cố định hay không với trình duyệt

Giá trị mặc định là

section {
    background-repeat: repeat-y;
        }

9, trong đó hình nền nằm cùng với thẻ của nó và tuân theo luồng tự nhiên của trang bằng cách cuộn lên và xuống khi chúng tôi cuộn lên và xuống

Giá trị thứ hai mà tài sản có thể có là

section {
    background-position: 20px 30px;
        }

0
Điều này làm cho hình nền ở cùng một vị trí, cố định vào trang và cố định trên chế độ xem của trình duyệt. Điều này tạo ra hiệu ứng thị sai mà bạn có thể xem ví dụ tại đây

See the Pen của Dionysia Lemonaki (@deniselemonaki) trên CodePen

Độ dốc nền

Một trường hợp sử dụng khác cho thuộc tính

section {
    background-repeat: repeat;
        }

9 là yêu cầu trình duyệt tạo một dải màu

section {
    background-repeat: repeat;
        }

9 trong trường hợp này không có URL, nhưng thay vào đó là một gradient tuyến tính

Cách đơn giản nhất để làm điều này là xác định góc. Điều này kiểm soát hướng của gradient và cách phối màu. Cuối cùng, thêm hai màu mà bạn muốn trộn với nhau trong một dải màu cho nền của thẻ

Một gradient đi từ trên xuống dưới và từ đen sang trắng là

section {
    background-repeat: repeat;
        }

0

Các độ phổ biến nhất được sử dụng cho độ dốc là

section {
    background-position: 20px 30px;
        }

3 từ trên xuống dưới

section {
    background-position: 20px 30px;
        }

4 từ trái sang phải

section {
    background-position: 20px 30px;
        }

5 từ dưới lên trên

section {
    background-position: 20px 30px;
        }

6 từ phải sang trái

Mỗi độ trên tương ứng với

section {
    background-position: 20px 30px;
        }

7,

section {
    background-position: 20px 30px;
        }

8,

section {
    background-position: 20px 30px;
        }

9 và

section {
    background-position: right center;
        }

0, tương ứng

section {
    background-repeat: repeat;
        }

1

See the Pen của Dionysia Lemonaki (@deniselemonaki) trên CodePen

Thay vì màu từ khóa, chúng ta có thể sử dụng màu hex để cụ thể hơn và có nhiều tùy chọn hơn

section {
    background-repeat: repeat;
        }

2

See the Pen của Dionysia Lemonaki (@deniselemonaki) trên CodePen

Chúng tôi cũng có thể bao gồm nhiều hơn hai màu trong một dải màu, tạo ra các hiệu ứng và cách phối màu khác nhau

Phần kết luận

Điều này đánh dấu sự kết thúc phần giới thiệu của chúng tôi về cú pháp cơ bản của thuộc tính

section {
    background-repeat: repeat;
        }

9

Từ đây, khả năng là vô tận và có nhiều chỗ cho rất nhiều biểu hiện sáng tạo. Những hiệu ứng này giúp người dùng có trải nghiệm thú vị khi truy cập trang web của bạn

Tôi hy vọng điều này là hữu ích, và cảm ơn bạn đã đọc

Hãy vui vẻ với thiết kế của bạn và viết mã vui vẻ

QUẢNG CÁO

Dionysia Lemonaki

Học một cái gì đó mới mỗi ngày và viết về nó

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Chúng tôi có thể tải lên một hình ảnh trong nền CSS không?

Thuộc tính CSS hình nền cho phép bạn đặt hình ảnh phía sau bất kỳ thành phần HTML nào bạn muốn . Đây có thể là toàn bộ trang (bằng cách sử dụng bộ chọn nội dung trong CSS nhắm mục tiêu phần tử