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 ảnh

Tự mình thử »

Cách đặt văn bản trong hình ảnh

Ví 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

Ví dụ

/* Vùng chứa giữ hình ảnh và văn bản */
. vùng chứa {
  vị trí. tương đối;
  căn chỉnh văn bản. trung tâm;
  màu. trắng;
}

/* Văn bản dưới cùng bên trái */
. vị trí {
dưới cùng bên trái. tuyệt đối;
  dưới cùng. 8px;
  trái. 16px;
}

/* Văn bản trên cùng bên trái */
. trên cùng bên trái {
  vị trí. tuyệt đối;
  trên cùng. 8px;
  trái. 16px;
}

/* Văn bản trên cùng bên phải */
. vị trí {
trên cùng bên phải. tuyệt đối;
  trên cùng. 8px;
  phải. 16px;
}

/* Văn bản dưới cùng bên phải */
. {
  vị trí dưới cùng bên phải. tuyệt đối;
  dưới cùng. 8px;
  phải. 16px;
}

/* Văn bản được căn giữa */
. vị trí {
  chính giữa. tuyệt đối;
  trên cùng. 50%;
  còn lại. 50%;
  biến đổi. dịch[-50%, -50%];
}

Để 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

//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

4

html3______2    6    7    6>

html3______2>5 >62

2324

16head418>

16

16______2>5 >6235>

23624546

23head439>

23

16head4>5>

html3____64____45>

4head4    2>

    head4>5>

head4____41>

_______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

4head4____45>

_______8_______64____82>

head4____41>

head4html____4

đầ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