Hình ảnh là một phần quan trọng của các trang web hiện đại và việc thêm hình nền mang lại nét hoàn hảo cho giao diện của trang web. nói về cách hình nền thu hút sự chú ý và là yếu tố hấp dẫn trực quan nhất của bất kỳ trang web nào
Chúng ta sẽ tìm hiểu tất cả về nó bằng cách bắt đầu với mã để thêm hình ảnh trên toàn bộ trang hoặc có các hình ảnh khác nhau trong các phần. Và sau này, chúng ta sẽ khám phá một số thuộc tính của ảnh nền như trung tâm, lặp lại, v.v. Tôi khuyên bạn nên theo sát mã này và dùng thử trong CodePen
Mã đầu tiên sẽ được sử dụng để thêm hình ảnh vào nền của phần thân
Đây là mã
Back ground image in bodyHello World!
This text is not easy to read on this background image.
Tệp CSS. Lý lịch. css
body { background-image: url["//cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724_960_720.jpg"]; }
đầu ra
Vì vậy, chúng tôi đã sử dụng thuộc tính background-image với giá trị là URL của trang web mà chúng tôi muốn nhập hình ảnh từ đó. Thuộc tính đã được sử dụng cho nội dung bên trong thẻ body và do đó chúng ta sẽ thấy hình nền trên toàn bộ trang. Văn bản bên trong thẻ body sẽ phủ lên hình nền
Chỉ thêm hình ảnh trong một phần của trang
Well, we may want to write over the image only in a part of the webpage which could be for the aesthetics or to show importance or to help the reader visualize. We use the property background-image but only for the content in
Mã số
Back ground image in bodyHello World!
This text is not easy to read on this background image.
Tên tệp CSS. Bộ phậnHình ảnh. css
div { background-image: url["//cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724_960_720.jpg"]; } Output:
Cách thêm nhiều ảnh nền
In the above code, we saw how to add an image in a division. Well, we can expand the usage by adding multiple
Tôi chắc chắn rằng văn bản ngắn này sẽ giúp lập bản đồ cách thực hiện. Để rõ ràng, hãy xem đoạn mã sau
Mã số
Back ground image in bodyHello World!
This text is not easy to read on this background image.
Hello World!
This text is not easy to read on this background image.
Hello World!
This text is not easy to read on this background image.
Tệp CSS. NhiềuDiv. css
.c1 { background-image: url["//cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724_960_720.jpg"]; } .c2 { background-image: url["//cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962__340.jpg"]; } .c3 { background-image: url["//cdn.pixabay.com/photo/2017/07/27/23/00/background-2547097__340.jpg"]; }
đầu ra
Chúng tôi cũng có các thuộc tính được sử dụng cùng với hình nền, chẳng hạn như vị trí nền, lặp lại nền, kích thước nền. Để hiểu tất cả các thuộc tính, tốt hơn là sử dụng tất cả bên trong một mã. Do đó, bằng cách làm theo mã và thay đổi các giá trị, bạn có thể hiểu cách sử dụng
Kiểm tra mã bên dưới và liên quan đến việc sử dụng các thuộc tính khác nhau trong đó
Hi multiple properties have been used around
Feel free to change and check.
Click me to get relief
Tệp CSS
body { margin: 0; } .c1 { background-image: url["//cdn.pixabay.com/photo/2020/09/05/12/38/landscape-5546444_960_720.jpg"]; height: 250px; background-position: center; background-repeat: no-repeat; background-size: cover; position: fix; } .c2 { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate[-50%, -50%]; color: white; }
đầu ra
Phần kết luận
Chúng tôi đã thấy mã để thêm hình nền theo nhiều cách khác nhau và sau đó sử dụng nhiều thuộc tính bên trong mã. Nói chung, với bài viết này, bạn nên được trang bị các thuộc tính cần thiết để phát xung quanh ảnh nền
Để tìm hiểu cách căn giữa hình ảnh trong CSS, hãy truy cập bài viết trước của chúng tôi. Để tìm hiểu thêm về CSS, hãy đăng ký blog của chúng tôi