Lưu ý. khi sử dụng hình ảnh làm nền, thì bạn nên sử dụng hình ảnh mà nó không gây ảnh hưởng lên các văn bản. If not image that will over over or doing Mờ chữ hoặc nội dung trang web của bạn
Dưới đây là ví dụ về sự kết hợp không tốt giữa văn bản và nền [hình nền]
Ví dụ 4
body {
hình nền. url[“bgdesert. jpg”];
}
Hình nền – lặp lại ảnh theo chiều dọc hoặc ngang
Mặc định thì thuộc tính background-image sẽ phù hợp với cả 2 dạng dọc và ngang [ngang và dọc]
Một số ảnh nên được đặt ngang hoặc dọc, nếu không thì trông nó rất xấu, không đẹp mắt, giống như sau
Ví dụ 5
body {
hình nền. url[“gradient_bg. png”];
}
If as the image on only was repeat on the width [background-repeat. repeat-x;], thì sẽ trông tốt hơn
Ví dụ 6
body {
hình nền. url[“gradient_bg. png”];
background-repeat. lặp lại-x;
}
Lưu ý. Để lặp lại một hình ảnh theo chiều dọc [vertical], chúng ta đặt lặp lại nền. lặp lại-y;
Hình nền – Vị trí thiết lập và không khớp
Để hiển thị hình nền chỉ một lần cũng được xác định bởi thuộc tính lặp lại nền
Ví dụ 7
body {
hình nền. url[“img_tree. png”];
background-repeat. không lặp lại;
}
Trong ví dụ trên hình nền hiển thị cùng nơi với văn bản. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không che khuất văn bản quá nhiều
Vị trí của hình ảnh được xác định với thuộc tính background-position
Ví dụ 8
body {
hình nền. url[“img_tree. png”];
background-repeat. không lặp lại;
vị trí nền. trên cùng bên phải;
}
Hình nền – Cố định vị trí
Để chỉ định hình nền sẽ cố định [tức là nó sẽ không bị mất di chuyển khi cuộn], sử dụng thuộc tính background-attachment
Ví dụ 9
body {
hình nền. url[“img_tree. png”];
background-repeat. không lặp lại;
vị trí nền. trên cùng bên phải;
background-attachment. đã sửa;
}
Thuộc tính nền – Viết mã ngắn
Để rút ngắn mã, bạn có thể chỉ định tất cả các thuộc tính nền trên cùng một dòng duy nhất. Nó được gọi là thuộc tính Tốc ký
Ví dụ 10
cơ thể {
nền. #ffffff url[“img_tree. png”] không lặp lại trên cùng bên phải;
}
Khi sử dụng tốc ký thuộc tính thì thứ tự giá trị thuộc tính sẽ là
- màu nền
- hình nền
- Bối cảnh Lặp lại
- tệp đính kèm nền
- vị trí nền
Nếu nhu cầu của bạn không cần sử dụng hết thuộc tính này trong tốc ký thì không quan trọng, bạn chỉ việc không đưa nó vào miễn phí sao linh hoạt theo thứ tự như trên đã được
Thuộc tính background-size của CSS3 cho phép chỉnh sửa kích thước ảnh nền của trang web theo ý bạn một cách rất đơn giản mà không cần phải chỉnh sửa kích thước ảnh bằng công cụ chuyên dụng IE9+, FireFox, Chrome, Safari và Opera đều hỗ trợ hai thuộc tính background-size kích thước nền cho phép bạn xác định kích thước của ảnh nền. Bạn có thể sử dụng đơn vị là pixel [px] hoặc đơn vị là phần trăm [%] cho kích thước của ảnh nền thông qua thuộc tính kích thước nền, nếu bạn sử dụng đơn vị là % thì kích thước của ảnh nền sẽ kích thước nền. [Rộng] [Cao]; hoặc kích thước nền. [Rộng]; , in that if only has a width value which does not have high speed, the high speed will be verifyed by the Rate of the widthSupport browser
cú pháp
Ví dụ 1. Ví dụ này sẽ sử dụng ảnh làm nền trong đó đơn vị của kích thước là px
#d1{
bề rộng. 900px;
Chiều cao. 300px;
biên giới. chất rắn mỏng màu xanh lá cây;
lai lịch. địa chỉ [https. //lh4. nội dung người dùng google. com/-mNwW2oSwNk4/UxdgRFc0TfI/AAAAAAAAARk/PvY72Wz8jOI/w140-h104-p/css3-logo. jpg];
Ở bài trước chúng ta đã cùng nhau TẠO HEADER CƠ BẢN LỰA CHỌN TRANG ĐẤT DỰ ÁN, với văn bản tiêu đề, nền gradient, logo
Trong bài học này, chúng ta sẽ tìm hiểu về CSS Clip-path và sử dụng nó để tạo hình cho hình nền
Nội dung
Để có thể tiếp tục theo dõi bài học này, bạn cần
Trong bài học này chúng ta sẽ khám phá
- Giới thiệu về clip-path
- Sử dụng clip-path cho trang đích web
Giới thiệu về clip-path
Chúng ta sẽ bắt đầu tìm hiểu bằng cách sử dụng trang web Clip-path maker. This is the interface of page web
Bức ảnh ở giữa trang web là biểu tượng cho nền ảnh. Chú ý hướng chỉnh các điểm bao gồm 2 tham số là x và y với gốc tọa độ là gốc bên trái màn hình
Bạn hoàn toàn có thể thay thế 60% bằng 120px, 100px vì đơn giản nó chỉ là một mức độ
Đến đây ta thử áp dụng tam giác và tứ giác bất kỳ vào trang landing web nền
header{
clip-path: polygon[50% 0%, 0% 100%, 100% 100%];
}
header{
clip-path: polygon[0 0, 100% 0, 100% 68%, 0% 100%];
}
Để chỉnh sửa các góc của hình và tạo ra các hình nền khác nhau, các bạn có thể chỉnh sửa trong Clip-path maker rồi sao chép mã CSS bên dưới là được
Sử dụng clip-path cho trang đích web
Trong landing page web của chúng ta, mình sử dụng hình ELLIPSE
Bằng cách chỉnh sửa vị trí của tâm ta sẽ được hình nền ảnh mong muốn
header{
clip-path: ellipse[60% 60% at 50% 33%];
}
Chú thích. các bạn có thể coi đây là đoạn code trong web Clip-path maker, có 2 dòng code CSS
Ví dụ
-webkit-clip-path: ellipse[37% 32% at 49% 50%];
clip-path: ellipse[60% 60% at 50% 33%];
Ở đây thuộc tính clip-path không phải luôn hỗ trợ các trình duyệt như google chrome, safari, opera nên cần thêm tiền tố “-webkit-“ để đảm bảo clip-path vẫn hoạt động trên các trình duyệt này
Việc làm trên sẽ được nêu rõ trong bài KIỂM TRA HỖ TRỢ TRÌNH DUYỆT trong khóa học này
Kết luận
Trong bài học này, chúng ta đã cùng nhau tìm hiểu về CSS CLIP-PATH và ứng dụng tạo ảnh nền
Ở bài học sau chúng ta sẽ bắt tay vào CODE BUTTON cũng như hoạt ảnh của nó trong phần Header
Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và đóng góp ý kiến của mình để giúp phát triển các bài viết tốt hơn. đừng quên. "Luyện tập – Thử thách – Không sợ khó"
Load down
Dự án
Nếu công việc thực hiện theo hướng dẫn không thể hiện ra các phần như mong muốn. Bạn cũng có thể tải xuống DỰ ÁN THAM KHẢO ở liên kết bên dưới
Thảo luận
Nếu bạn gặp bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam. com to get the support from the community