Css hình nền
|
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 Show 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ã
Tệp CSS. Lý lịch. css
body {
background-image: url("https://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 trangWell, 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 tag. Let’s see a code to understand it better. Mã số
Tên tệp CSS. Bộ phậnHình ảnh. css div {
background-image: url("https://cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724_960_720.jpg");
}
Output:Cách thêm nhiều ảnh nềnIn the above code, we saw how to add an image in a division. Well, we can expand the usage by adding multiple tags in the HTML code with unique ids assigned to every tag. This id will be further utilized in the CSS to add different background images to every section.
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ố
Tệp CSS. NhiềuDiv. css .c1 {
background-image: url("https://cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724_960_720.jpg");
}
.c2 {
background-image: url("https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962__340.jpg");
}
.c3 {
background-image: url("https://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 đó
Tệp CSS body {
margin: 0;
}
.c1 {
background-image: url("https://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ậnChú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 Làm cách nào để thêm hình nền trong CSS?Ảnh nền CSS . Đặt hình nền cho trang. cơ thể {hình nền. url("giấy. gif"); }. Ví dụ này cho thấy sự kết hợp không tốt giữa văn bản và hình nền. Các văn bản là khó có thể đọc được. cơ thể {hình nền. url("bgdesert. jpg");. p { hình nền. url("giấy. gif"); } Tự mình thử » Chúng ta có thể thay đổi nền hình ảnh trong CSS không?Thuộc tính CSS có kích thước nền cho phép bạn thay đổi kích thước hình nền của một phần tử , ghi đè hành vi mặc định là xếp hình ảnh ở kích thước đầy đủ bằng cách chỉ định chiều rộng và/hoặc chiều cao .
Làm cách nào để thêm hình nền trong CSS mà không cần URL?đường dẫn tương đối dựa trên miền gốc của tệp CSS — bắt đầu bằng dấu gạch chéo (/) như minh họa ở trên . đường dẫn tương đối dựa trên thư mục trực tiếp của tệp CSS — không có dấu gạch chéo (url(đường dẫn/đến/hình ảnh. png) )
Hình nền có phải là thuộc tính CSS không?Thuộc tính CSS hình nền đặt một hoặc nhiều hình nền trên một phần tử. |
