Lớp phủ chú thích hình ảnh Bootstrap 4
|
Tìm hiểu cách đặt văn bản trên một hình ảnh Văn bản hình ảnhTự mình thử » Cách đặt văn bản trong hình ảnhBước 1) Thêm HTMLVí dụ
Dưới cùng 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 căn giữa Bước 2) Thêm CSSVí dụ/* Vùng chứa giữ hình ảnh và văn bản */ /* Văn bản dưới cùng bên trái */ /* Văn bản trên cùng bên trái */ /* Văn bản trên cùng bên phải */ /* Văn bản dưới cùng bên phải */ /* Văn bản được căn giữa */ Để tìm hiểu thêm về cách tạo kiểu cho hình ảnh, hãy đọc hướng dẫn về Hình ảnh CSS của chúng tôi Để tìm hiểu thêm về định vị CSS, hãy đọc hướng dẫn Vị trí CSS của bạn Kể chuyện bằng nội dung trực tuyến có thể phức tạp. Điều này đặc biệt đúng nếu bạn kết hợp hình ảnh và văn bản. Chú thích hình ảnh Bootstrap đảm bảo rằng nội dung phù hợp được liên kết với nội dung có liên quan. Bạn có thể chọn trong số các tùy chọn khác nhau để thêm mô tả cho hình ảnh của mình, chẳng hạn như chú thích tiêu chuẩn, lớp phủ văn bản, lớp phủ văn bản có nền, v.v. Cho dù bạn muốn làm nổi bật dòng chữ của mình hay kể toàn bộ câu chuyện đằng sau các bức ảnh, đoạn mã này sẽ giúp bạn làm điều đó và tạo chú thích Bootstrap để đi kèm với hình ảnh của bạn Tại sao Bootstrap?Bootstrap là một khuôn khổ giao diện người dùng đẹp, trực quan và mạnh mẽ để phát triển web nhanh hơn và dễ dàng hơn. Đó là một tập hợp các công cụ được thiết kế để khởi động quá trình phát triển các dự án web Kể từ khi giới thiệu Bootstrap, nó đã cách mạng hóa cách các nhà thiết kế và nhà phát triển xây dựng dự án của họ. Điều này là do nó là một trong những khung phổ biến nhất trên thế giới và biên dịch chức năng CSS và Javascript thành một công cụ tiện lợi Mã này ban đầu được tạo trong Bootstrap 4 nhưng cũng sẽ hoạt động tốt trong Bootstrap 5. Nếu gặp sự cố, hãy cho tôi biết Nếu bạn thích đoạn mã này, bạn cũng có thể thích khám phá Tải lên hình ảnh Bootstrap hoặc Lịch Bootstrap Xin lưu ý rằng trình chỉnh sửa tương tác trên trang này nên được xem trên máy tính xách tay hoặc máy tính để bàn của bạn để có kết quả tốt nhất Trong bài viết này, chúng ta sẽ học cách sử dụng image overlay đúng cách với Bootstrap. Nhưng trước đó, trước tiên, chúng ta cần biết Lớp phủ hình ảnh là gì Lớp phủ hình ảnh. Lớp phủ hình ảnh thường đề cập đến hình ảnh là hình nền và chèn văn bản và liên kết bên trong hình ảnh đó. Nó có thể được thực hiện bằng cách sử dụng thuộc tính 'card-img-overlay' có trong bootstrap. Ngoài ra, chúng ta có thể làm điều đó với CSS bình thường cùng với chủ đề bootstrap. Hôm nay chúng ta sẽ học cả hai kỹ thuật để hiểu tài sản ví dụ 1. Sử dụng thuộc tính 'card-img-overlay' trong bootstrap Lúc đầu, chúng tôi cần CDN bootstrap cần thiết để sử dụng các thành phần bootstrap. Để có được những thứ đó, người ta chỉ cần truy cập trang web của họ và sao chép các liên kết đến mã của họ. Liên kết đến CDN được cung cấp bên dưới https://getbootstrap.com/docs/5.0/getting-started/introduction/ Từ đó, sao chép tất cả các tệp CSS và JS vào mã của bạn Mã số HTML
________số 8
_______64____3____190 đầu ra
Ở đầu ra, văn bản và liên kết hoạt động bình thường bên trong hình ảnh và do đó, tính năng lớp phủ hình ảnh được thể hiện ví dụ 2. (Chỉ dùng CSS không dùng lớp Bootstrap). Trong ví dụ này, chúng tôi sẽ minh họa lớp phủ hình ảnh bằng CSS trong khi bootstrap sẽ được đưa vào mã. Nhưng trước khi viết mã, chúng tôi phải bao gồm các CDN bootstrap để có được hiệu ứng bootstrap cho trang web của chúng tôi Mã số HTML
________số 8
_______8_______64____82
đầu ra 
HTML là nền tảng của các trang web và được sử dụng để phát triển trang web bằng cách cấu trúc các trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML và Ví dụ về HTML này CSS là nền tảng của các trang web và được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này |
