Hình ảnh nền CSS - Cách thêm URL hình ảnh vào đơn vị của bạn

Giả sử bạn muốn đặt một hoặc hai hình ảnh trên một trang web. Một cách là sử dụng thuộc tính background-imageCSS.

Khách sạn này được áp dụng một hoặc nhiều hình ảnh nền cho một phần tử, như một , như các 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 có 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 cách sử dụng thuộc background-imagetính. Chỉ cần cung cấp đường dẫn đến hình ảnh trong url()giá trị.

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

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

Hoặc nó có thể là một con đường cục bộ. Đâ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 background-imagetính.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//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ó.

Phân tách từng url()giá trị hình ảnh bằng dấu phẩy.

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//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ụ bạn có thể thêm vào hình nền của mình, chẳng hạn như background-repeatbackground-position, mà chúng tôi đã sử dụng trong ví dụ trên. Bạn thậm chí có thể thêm gradient vào hình nền.

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

Vấn đề đặt hàng

Thứ tự mà bạn liệt kê hình ảnh của mình quan trọng vì thứ tự xếp chồng. Điều đó có nghĩa là hình ảnh đầu tiên được liệt kê ở 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("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//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 (morocco-blue.png) sẽ ở trước hình ảnh thứ hai (Oriental-tile.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-tile.png) sang bên phải 200 pixel, thì 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 như thế nào khi chúng tôi đặ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ích về background-imagetài sản. 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à vì bạn không thể thêm thông tin dạng văn bản vào thuộc background-imagetính. Kết quả là hình ảnh sẽ bị trình đọc màn hình bỏ sót.

Chỉ sử dụng thuộc background-imagetính 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 nếu 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 phần tử hình ảnh, sử dụng altthuộc tính mô tả hình ảnh. Văn bản được cung cấp sẽ được chọn bởi trình đọc màn hình.

Hãy nghĩ về nó theo cách này: background-imagelà một thuộc tính CSS, và CSS tập trung vào cách trình bày hoặc phong cách; HTML tập trung vào ngữ nghĩa hoặc ý nghĩa.

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ì nơi background-imagenghỉ này 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 để học lập trình ( amymhaddad.com).