Hình nền CSS phù hợp với div

Thuộc tính này áp dụng một hoặc nhiều hình nền cho một phần tử, chẳng hạn như

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

3, như tài liệu giải thích. Sử dụng nó vì lý do thẩm mỹ, chẳng hạn như thêm nền kết cấu vào trang web của bạn

Thêm hình ảnh

Thật dễ dàng để thêm một hình ảnh bằng thuộc tính

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

4. Chỉ cần cung cấp đường dẫn đến hình ảnh trong giá trị

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

0

Đường dẫn hình ảnh có thể là một URL, như trong ví dụ bên dưới

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

Hoặc nó có thể là một đường dẫn địa phương. Đây là một ví dụ

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

Thêm nhiều hình ảnh

Bạn có thể áp dụng nhiều hình ảnh cho thuộc tính

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

4

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
   background-position: right, left; 
}

Đó là rất nhiều mã. Hãy phá vỡ nó

Tách từng giá trị

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

0 của hình ảnh bằng dấu phẩy

background-image: 
    url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
    url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Bây giờ định vị và nâng cao hình ảnh của bạn bằng cách áp dụng các thuộc tính bổ sung

background-repeat: no-repeat, no-repeat;
background-position: right, left; 

Có một số thuộc tính phụ mà bạn có thể thêm vào ảnh nền của mình, chẳng hạn như

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

3 và

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

4, mà chúng tôi đã sử dụng trong ví dụ trên. Bạn thậm chí có thể thêm độ dốc vào hình nền

Xem nó trông như thế nào khi chúng ta đặt mọi thứ lại với nhau

Vấn đề đặt hàng

Thứ tự bạn liệt kê các hình ảnh của mình có vấn đề do thứ tự xếp chồng. Điều đó có nghĩa là hình ảnh đầu tiên được liệt kê là gần người dùng nhất, theo tài liệu. Sau đó, cái tiếp theo, và cái tiếp theo, v.v.

Đây là một ví dụ

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
}

Chúng tôi đã liệt kê hai hình ảnh trong đoạn mã trên. Hình ảnh đầu tiên (màu xanh Ma-rốc. png) sẽ đứng trước cái thứ hai (oriental-tiles. png). Cả hai hình ảnh đều có cùng kích thước và thiếu độ mờ, vì vậy chúng tôi chỉ nhìn thấy hình ảnh đầu tiên

Nhưng nếu chúng ta di chuyển hình ảnh thứ hai (oriental-tiles. png) sang bên phải 200 pixel, sau đó bạn có thể thấy một phần của nó (phần còn lại vẫn bị ẩn)

Đây là những gì nó trông giống như khi chúng ta đặt mọi thứ lại với nhau

Khi nào bạn nên sử dụng hình nền?

Có rất nhiều điều thú vị về tài sản

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

4. Nhưng có một nhược điểm

Tài liệu chỉ ra rằng hình ảnh có thể không truy cập được đối với tất cả người dùng, giống như những người sử dụng trình đọc màn hình

Đó là bởi vì bạn không thể thêm thông tin văn bản vào thuộc tính

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

4. Do đó, trình đọc màn hình sẽ bỏ lỡ hình ảnh

Chỉ sử dụng thuộc tính

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

4 khi bạn cần thêm một số trang trí vào trang của mình. Nếu không, hãy sử dụng phần tử HTML

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

8 nếu một hình ảnh có ý nghĩa hoặc mục đích, như tài liệu lưu ý

Bằng cách đó, bạn có thể thêm văn bản vào thành phần hình ảnh, sử dụng thuộc tính

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

9, mô tả hình ảnh. Văn bản được cung cấp sẽ được trình đọc màn hình chọn

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

2

Nghĩ theo cách này.

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

4 là thuộc tính CSS và CSS tập trung vào cách trình bày hoặc kiểu dáng;

Khi nói đến hình ảnh, bạn có các tùy chọn. Nếu cần một hình ảnh để trang trí, thì tài sản

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

4 có thể là một lựa chọn tốt cho bạn

Tôi viết về việc học lập trình và những cách tốt nhất để thực hiện nó (amymhaddad. com)

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Amy Haddad

Lập trình viên và nhà văn. cách học hiệu quả. com. công cụ lập kế hoạch hàng ngày. com

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơ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