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["//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ạnThêm hình ảnhThậ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["//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["//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 ảnhBạ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["//amymhaddad.s3.amazonaws.com/morocco-blue.png"];
height: 400px;
width: 100%;
}
4div {
/* 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ó
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ẩybackground-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ụ 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ềnXem nó trông như thế nào khi chúng ta đặt mọi thứ lại với nhau
Vấn đề đặt hàngThứ 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["//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 [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["//amymhaddad.s3.amazonaws.com/morocco-blue.png"];
height: 400px;
width: 100%;
}
4. Nhưng có một nhược điểmTà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["//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 ảnhChỉ sử dụng thuộc tính
div {
/* Background pattern from Toptal Subtle Patterns */
background-image: url["//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ọndiv {
/* Background pattern from Toptal Subtle Patterns */
background-image: url["//amymhaddad.s3.amazonaws.com/morocco-blue.png"];
height: 400px;
width: 100%;
}
2Nghĩ theo cách này.
div {
/* Background pattern from Toptal Subtle Patterns */
background-image: url["//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["//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ạnTô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
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