Cách chèn hình ảnh lên trên nền trong html
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 Show 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ư ________ 03, ________ 04, ________ 05 và ________ 06 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ềnBướ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 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à 8 mà chúng tôi muốn sử dụngThuộc tính CSS 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 0 trong CSS nhắm mục tiêu phần tử 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ử 2 như trong ví dụ bên dướiĐể thêm một 9 vào thẻ phần trong tệp 4 của bạn, hãy viết đoạn mã sau 2Hãy thảo luận về những gì đang xảy ra ở đây một cách chi tiết
Cách dừng lặp lại nềnKhi 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 82 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 không cho hình ảnh tự lặp lại cùng nhau
Đây là giá trị mặc định nếu chúng ta không gán giá trị cho thuộc tính 82. 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
Giá trị 84 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 8Giá 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 85. 85 trong toán học là từ trái sang phải 8Giá 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 87. 87 trong môn toán là từ trên xuống dướiCách đặt vị trí nềnSau 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 tôi sẽ sử dụng tài sản 89 để làm điều nàyBộ 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 2Đ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ẻ 3Đ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 4Để đị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 5Đ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ư 80 hoặc 81 hoặc 82, áp dụng giá trị đó cho cả hai hướngCá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 9Nế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
Quy tắc 86 trong trường hợp này sẽ cắt các phần của hình ảnhKhi chúng tôi thay đổi nó thành 87, chúng tôi thấy rằng hình ảnh co lại để phù hợp với thẻ phầnCách sử dụng thuộc tính tệp đính kèm nềnVới thuộc tính 88, 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ệtGiá trị mặc định là 89, 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ốngGiá trị thứ hai mà thuộc tính có thể có là 20. Đ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ềnMột trường hợp sử dụng khác cho thuộc tính 9 là yêu cầu trình duyệt tạo một gradient 9 trong trường hợp này không có URL mà thay vào đó là một linear-gradientCá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à 0Các độ phổ biến nhất được sử dụng cho độ dốc là
Mỗi độ trên tương ứng với 27, 28, 29 và 30, tương ứng 1See 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 2See 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 Sự 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 9Từ đâ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 QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO 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 |