Hướng dẫn background image with text overlay bootstrap - hình nền với lớp phủ văn bản bootstrap
|
Đây là một hình ảnh nền đẹp với lớp phủ trong suốt. Bạn chỉ có thể sử dụng lớp ".bg-Overlay" trên bất kỳ container/phần tử nào và chỉ định hình ảnh bạn muốn sử dụng và chiều cao của nó. Bắt đầu Đây là một hình ảnh nền không có lớp phủ. Bắt đầu Show
. -1416339442236-8CEB164046F8? Bối cảnh lặp lại: Không lặp lại; Kích thước nền: Bìa; Định vị nền: Trung tâm; Màu sắc: #FFF; Chiều cao: 450px; Đau trên đỉnh: 50px; }. Bối cảnh lặp lại: Không lặp lại; Kích thước nền: Bìa; Định vị nền: Trung tâm; Màu sắc: #FFF; Chiều cao: 450px; Đau trên đỉnh: 50px; } Tìm hiểu cách đặt văn bản qua một hình ảnh. Văn bản hình ảnhPhía dưới bên trái Trên cùng bên trái Trên cùng bên phải Góc phải ở phía dưới Tập trung Hãy tự mình thử » Cách đặt văn bản vào hình ảnhBước 1) Thêm HTML:Thí dụ& nbsp; & nbsp; Dưới cùng bên trái & nbsp; Trên cùng bên trái & nbsp; Trên cùng bên phải & nbsp; Dưới cùng bên phải & nbsp; Tập trung Bottom Left Top Left Top Right Bottom Right Centered Bước 2) Thêm CSS:Thí dụ& nbsp; & nbsp; Dưới cùng bên trái & nbsp; Trên cùng bên trái & nbsp; Trên cùng bên phải & nbsp; Dưới cùng bên phải & nbsp; Tập trung Bước 2) Thêm CSS: / * Container giữ hình ảnh và văn bản */. Container {& nbsp; Vị trí: tương đối; & nbsp; Văn bản-Align: Trung tâm; & nbsp; màu trắng;} / * Văn bản dưới cùng bên trái */ .bottom-left {& nbsp; Vị trí: Tuyệt đối; & nbsp; Dưới cùng: 8px; & nbsp; Trái: 16px;} / * Văn bản trên cùng bên trái */. TOP-bên trái {& nbsp; & nbsp; vị trí: tuyệt đối; & nbsp; Top: 8px; & nbsp; Trái: 16px;} / * Văn bản bên phải hàng đầu */. TOP-bên phải {& nbsp; Vị trí: Tuyệt đối; & nbsp; Top: 8px; & nbsp; Phải: 16px;} Hãy tự mình thử » Cách đặt văn bản vào hình ảnh Bước 1) Thêm HTML: Bootstrap 5 Hình nền
Video hướng dẫn Ví dụ cơ bảnĐây là một ví dụ cơ bản của một hình nền toàn trang. Nếu bạn cần một hình ảnh nền với các cài đặt khác nhau, hãy xem các phần khác của tài liệu này.
Làm thế nào nó hoạt độngBạn có thể dễ dàng đặt hình nền trong mỗi phần tử HTML bằng cách thêm một dòng CSS: Bên trong URL (''), chúng tôi cần cung cấp một liên kết đến hình ảnh của chúng tôi. Nếu bạn muốn sử dụng hình ảnh trên máy tính của mình, đường dẫn sẽ trông như thế này:
Bạn cũng có thể sử dụng một đường dẫn tuyệt đối và thêm một liên kết đến hình ảnh trực tiếp từ Internet. Sau đó, chúng ta chỉ cần thêm dòng CSS này vào phần tử HTML. Tuy nhiên, mặc dù vậy, hình ảnh của chúng tôi không xuất hiện. Hãy xem bản demo: Thử nghiệm Đó là bởi vì chúng ta cần cung cấp chiều cao cho yếu tố HTML này. Hãy thêm Bây giờ nó hoạt động ... một phần. Chúng tôi thấy hình ảnh, nhưng nó bị cắt và khó coi. Nhấp vào hình ảnh để khởi chạy bản demo trực tiếp. May mắn thay, có một lớp học trong mdbootstrap khắc phục vấn đề này. Chỉ cần thêm .bg-hình ảnh vào lớp và bạn sẽ thấy vấn đề biến mất một cách kỳ diệu.  Hình nền đầy đủ hình ảnhBây giờ chúng ta có thể dễ dàng làm cho hình ảnh nền này để bao gồm toàn bộ không gian có sẵn và biến nó thành một hình nền toàn trang. Chỉ cần thay thế ____9 bằng
Lưu ý: Nếu bạn muốn kéo dài hình ảnh lên toàn bộ chiều cao và chiều rộng có sẵn, hãy nhớ sử dụng hình ảnh có đủ độ phân giải cao. Tuy nhiên, hãy cẩn thận để không lạm dụng nó. Hình ảnh độ phân giải Heigh nặng rất nhiều và có thể làm chậm trang web của bạn. If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website. Đó là bởi vì chúng ta cần cung cấp chiều cao cho yếu tố HTML này. Hãy thêm height: 400px; để đặt chiều cao.Bây giờ nó hoạt động ... một phần. Chúng tôi thấy hình ảnh, nhưng nó bị cắt và khó coi. Nhấp vào hình ảnh để khởi chạy bản demo trực tiếp. Đó là bởi vì chúng ta cần cung cấp chiều cao cho yếu tố HTML này. Hãy thêm height: 400px; để đặt chiều cao.Bây giờ nó hoạt động ... một phần. Chúng tôi thấy hình ảnh, nhưng nó bị cắt và khó coi. Nhấp vào hình ảnh để khởi chạy bản demo trực tiếp.May mắn thay, có một lớp học trong mdbootstrap khắc phục vấn đề này. Chỉ cần thêm .bg-hình ảnh vào lớp và bạn sẽ thấy vấn đề biến mất một cách kỳ diệu. Hình nền đầy đủ hình ảnhBây giờ chúng ta có thể dễ dàng làm cho hình ảnh nền này để bao gồm toàn bộ không gian có sẵn và biến nó thành một hình nền toàn trang.The best way to do this is to use flexbox. Chỉ cần thay thế ____9 bằng
vh0 có nghĩa là 100% chiều cao có sẵn.Lưu ý: Nếu bạn muốn kéo dài hình ảnh lên toàn bộ chiều cao và chiều rộng có sẵn, hãy nhớ sử dụng hình ảnh có đủ độ phân giải cao. Tuy nhiên, hãy cẩn thận để không lạm dụng nó. Hình ảnh độ phân giải Heigh nặng rất nhiều và có thể làm chậm trang web của bạn. Hình nền nửa trang Bạn cũng có thể kéo dài nửa trang hình ảnh (hoặc bất kỳ phần trăm nào khác). Chỉ cần thay thế Đây là một thiết kế rất hữu ích thường được sử dụng trong nhiều trang đích.
Nội dung tập trung Độ dốcBạn cũng có thể sử dụng trình tạo gradient của chúng tôi để áp dụng độ dốc tuyệt đẹp cho hình nền. Tôi cho rằng bạn đã nghe nói về các bộ lọc Instagram nổi tiếng. Nhờ trình tạo bộ lọc Instagram của chúng tôi, bạn có thể áp dụng chúng vào hình nền của bạn. SVGBạn đang tìm kiếm một cái gì đó thậm chí còn ngông cuồng hơn? Sử dụng trình tạo sóng SVG của chúng tôi và áp dụng hình dạng vector cho hình nền. Làm cách nào để đặt văn bản trên một hình ảnh trong bootstrap?Tôi có thể nói sau khi thẻ của bạn thêm một số văn bản ở đây, văn bản của bạn sẽ xuất hiện trên hình ảnh của bạn!.Mẩu chuyện dài .Thêm class = capousel-capned vào thẻ HTML chứa văn bản của bạn cần được định vị trên hình ảnh của bạn!.(Và sau đó nếu bạn muốn thêm CSS CSS TOP: XYZ% vào của bạn.after your
Làm thế nào để bạn phủ văn bản trên một hình ảnh trong CSS?Thuộc tính vị trí CSS được sử dụng để đặt vị trí của văn bản trên một hình ảnh.Điều này có thể được thực hiện bằng cách kèm theo hình ảnh và văn bản trong một HTML, Div Div. Sau đó, hãy tạo ra vị trí của Div, tương đối và của văn bản là tuyệt đối.Các yếu tố tuyệt đối được định vị so với cha mẹ của họ (Div).enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div).
|
